This week I decided to participate in the Clicker Jam Summer 2022 game jam. The goal of this game jam is to create an idle clicker game in 7 days. For this game jam I decided to share my daily updates via video dev logs.
If you are interested in checking out the game that I am making, you can see the game on Itchio here: Idle Programmer.
You can watch my video dev log here on YouTub: Clicker Jam Summer 2022 - Dev Log - Day 0
For the second day, I decided to take the code I worked on in day 1 and to refactor it. For the first step, I broke up the code into new classes. Once I had this working, I decided that I wanted to try and create a plugin from this code so that way the code could be re-used in other projects. I also ran into some issues with my linting, so I updated the project to use the typescript version of the airbnb config.
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.
Intro The purpose of this tutorial is to show you how to create a simple Memory Game class in TypeScript that will contain all of the core game logic for building a simple Memory Game. For this tutorial, we will be testing our game logic using the browser developer console. However, in future tutorials, I will be showing you how we can take this class and create a basic Memory Game using HTML5 game frameworks like Phaser and Kontra.
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.