For the first day, I decided to start simple and focus on getting the codebase setup that way I can keep my daily log and code in the same repository. Since I decided to use TypeScript for my challenge, this meant that I would need something to transpile my code so it can run in the browser, and I already had a template setup to do this. However, I didn’t want to create a seperate code base for each example since it would be hard to maintain, and ideally I only wanted one configuration file for the whole challenge.
Between work, home life, and the side projects I am working on, I haven’t been spending as much time on my game development projects as I would like. So in order to change things up, I thought it would be fun to challenge myself to coding an hour a day with the Phaser 3 framework by doing the #100DaysOfCode challenge. If you are not familiar, the #100DaysOfCode is a challenge to code for one hour a day for the next 100 days and to publicly commit to the challenge by tweeting your progress each day.
Phaser 3 offers a fantastic Webpack project template that makes it easy to start creating games right away. This template uses Webpack Dev Server , which provides live reloading while working on your game. It will also bundle all of JS files into one file once you are ready to deploy your game.
However, one thing that is missing from this template for me is support for ES6 and other newer features of JS.
My new Phaser 3 tutorial on creating a Phaser 3 template is finally live on Game Dev Academy.
In this tuorial, I show you how to create a Phaser 3 template that you will be able to extend and reuse in future Phaser 3 game you work on. In the tutorial, I show you how to:
extend the basic Phaser 3 template adding a Boot scene adding a Preloader scene In part 2 we will wrap up the tutorial by covering the following topics:
My new Phaser 3 tutorial on creating an offline first game in Phaser 3 is finally live on Game Dev Academy.
In this tuorial, I show you how to turn your Phaser Game into a Progressive Web App. In the tutorial, I show you how to:
add a service worker cache assets manage your cache assets how to allow users to add your game to their home screen You can checkout the tutorial here: https://gamedevacademy.
My new Phaser 3 tutorial on making a dialog modal plugin in Phaser 3 is finally live on Game Dev Academy. This is the second part of the tutorial.
In this tuorial, we pickup were we left off in the first tutorial we focus on the following:
adding logic to for a close button on the dialog window add logic to show/hide the window add logic to show dialog add logic to animate the text You can checkout the tutorial here: https://gamedevacademy.
My new Phaser 3 tutorial on making a dialog modal plugin in Phaser 3 is finally live on Game Dev Academy. This is the first part of the tutorial.
In this tuorial, we focus on the basics of creating a plugin that can be reused in all of your Phaser games. We then move on to creating our basic plugin, and then we wrap up the tutorial by getting the plugin to render our dialog window in our game.
My new Phaser 3 tutorial on making a multiplayer game in Phaser 3 is finally live on Game Dev Academy. This is the second part of the multiplayer tutorial.
In this tuorial, we pick up were we left in part 1, and we start adding the client side logic for adding players to our game. We then move on by adding the logic for player input and finally we wrap up the game by adding some collectables for the players to collect.
My new Phaser 3 tutorial on making a multiplayer game in Phaser 3 is finally live on Game Dev Academy. This is the first part of the tutorial.
In this tuorial, I show you how to create a simple multiplayer game by using NodeJS and SocketIO. I start by showing you how to setup your Node server, rendering your Phaser game, and then finally we add SocketIO to the project.
Recently, I took a Phaser 3 tutorial writer position at Zenva (Game Dev Academy - https://gamedevacademy.org/) , and now that my first tutorial has been approved and it is finally live, I wanted to share it here.
For my first tutorial, I decided to expand on the simple preloader tutorial I wrote about in Feburary (here is a link in case you missed it: https://scottwestover.github.io/2018/02/14/Phaser3-Create-a-simple-preloader/) .
In this tutorial, I show you how to make a simple preloader scene by displaying a progress bar.