Phaser JS: Progress Bar 01: Asset preloading using phaser webpack loader
Part 1 of coding a asset loading screen along with a visual progress bar and easy asset management and automated asset packaging. Set up Phaser 3 along with the phaser webpack loader for easy management of assets and jest testing framework for javascript testing of the game. This is a two part tutorial covering initialising your project in node.js from a template, npm installing the phaser-webpack-loader and setting this up in webpack. We will then create two scenes, one to manage the loading of assets which then starts another scene to start our game scene. In the next tutorial we will create the progress bar itself and some fading into the scene. We will then round off with refactoring the progress bar into a reusable unit. We will learn how to install the jest testing frame work to help us modify the code to allow for the component to scale to any supplied dimension and keep the text and graphics in proportion.
There are two ways to watch this set of tutorials. The long version where you follow me actually program and refactor the project from start to finish, or the short version where I retrospectively review the code from the previous videos. If you have a good knowledge of Javascript programming or just don't want to hear me drone on for the next half hour or so then the retrospective is the way to go and I will leave a link below.
Part 1 will cover installing Phaser 3, initialising the project template and installing the asset webpack manager. We will learn how to load assets with our manager a lay down the initial code.
Journey with me and
Subscribe:
/ @mangojellysolutions
Browse my Redbubble Shop:
http://MangojellyLabs.redbubble.com
