Phaser 3 Shader Tutorial: Recreating Pokemon Battle Scene Transitions!

#gamedev #phaser
Interested in learning more about WebGL and how we can use this API to create awesome shaders, and how we can use those shaders in our Phaser 3 games? Then you will not want to miss this video!
In this video, we focus on re-creating some of the classic Pokemon style battle scene transitions, and we do this by creating some awesome WebGL shaders by using the Phaser 3 library. We take a look at recreating some of the class battle scene transitions like:
- horizontal screen wipe
- vertical screen wipes
- opening and closing vertical bars
- fade to black and white
You can see a live example of the code here:
devshareacademy.github.io/pha...
You can find the started code for the project on GitHub here:
github.com/devshareacademy/ph...
Additional Content:
Video on getting started with shaders in Phaser 3: • Phaser 3 Tutorial: Get...
Video Chapters
0:00 - Intro
1:22 - Review starter code
3:33 - Overview of shader pipelines
5:33 - Start coding for wipe shader
8:52 - Curtain fall shader
10:17 - Closing bars shader
15:17 - Opening bars shader
16:49 - Fade effect shader
20:26 - Thanks and links to other content
The completed code for this project can be found here on GitHub:
github.com/devshareacademy/ph...
github.com/devshareacademy/ph...
Interested in more great content?
Check out my videos on Phaser 3 here on KZbin:
• Phaser 3
Check out my free courses here on KZbin:
Monster Tamer - Pokemon like RPG Tutorial with Phaser 3:
• Monster Tamer - Pokemo...
Introduction To GitHub Actions Course:
• Introduction To GitHub...
JavaScript Course:
• Learn JavaScript Course
Follow Me:
/ scott-westover-77393a97
github.com/scottwestover
Blog:
scottwestover.dev/

[@UnderArea51]

Question: is there a JS sound method - library - built in JS - that exists that works like Python ‘s Winsound.beep()? To create tunes without sound files, MP3 etc?

[@swestover]

One library I have played around with before was p5.js. The library has support for loading sounds from a file, but it also allows you to create your own custom synthesizers for generating unique sounds. A simple example can be seen here: p5js.org/reference/#/p5.MonoSynth. If you come across any other ones that you recommend, please let me know.