Game Development

Book Code Correction

Book Code Correction

Game Development
In my recent book on Creating and Publishing HTML5 games in 24 hours has a few mistakes. The mistakes were not there during publishing but due some changes in Phaser they now exists. Fortunately they are easy to fix. In the scoreBox class add the following code: destroyMe() { emitter.off(G.SCORE_UPDATED, this.scoreUpdated, this); } And in SceneMain.js change the playAgain function to this: playAgain() { this.scoreBox.destroyMe(); this.scoreBox.destroy(); this.scene.start("SceneOver"); } This will turn off the listener for the scoreBox just before destroying it. The game was adding a listener every time play again was invoked.
Simon Game – 1 Hour Game – Phaser

Simon Game – 1 Hour Game – Phaser

Game Development, Phaser, Tutorials
The 1 Hour Game -Simon Game Sometimes I want to challenge myself to write a game in just 1 hour. Obviously, this does limit what games I can make, but that doesn't mean the game is just an experiment. My brothers and sisters and I would fight over the Simon Game when I was a kid. If you are too young to know what it is, it was a big plastic circle with 4 buttons that would light up, and you'd have to match the pattern of the song it played. I will probably adapt this game to use for my work at Gaiaonline, or use it for a new Udemy course. There are plenty of times when I am asked to do quick games, on a low budget and not much time. If you are a game developer you will know this is commonplace. I set the timer for one hour and made the core logic in 45 minutes. I did use the mega te
Adding a Toast Message in Phaser

Adding a Toast Message in Phaser

Game Development, javascript, Phaser
A toast message is a text message that fades in and out. It is named a toast message because it is similar to someone raising a glass, making a toast and then lowering the glass again. It gets your attention without interrupting the experience. Here is an example The Code var StateMain = { preload: function() { game.load.image("toastBack", "images/back.png"); game.load.image("btnToast", "images/btnGenerate.png"); }, create: function() { //SET UP TEST BUTTON this.btnToast=game.add.sprite(game.world.centerX,game.height*.25,"btnToast"); this.btnToast.anchor.set(0.5,0.5); this.btnToast.inputEnabled=true; this.btnToast.events.onInputDown.add(this.testToast,this); }, testToast: function() { this.btn...
Get the angle between 2 objects in Phaser

Get the angle between 2 objects in Phaser

Game Development, javascript, Phaser, Tutorials
Something that has been very useful for me lately is to be able to get the angle between two objects or get the angle between the mouse and a central character. For example in a game with a spaceship where you want to click and fire, you need to know the angle to be able to turn the ship. The actual math to get the angle is a bit complex, and I won't pretend I understand it, but it has been a very useful snippet for me to have. getAngle: function(obj1, obj2) { // angle in radians var angleRadians = Math.atan2(obj2.y - obj1.y, obj2.x - obj1.x); // angle in degrees var angleDeg = (Math.atan2(obj2.y - obj1.y, obj2.x - obj1.x) * 180 / Math.PI); return angleDeg; }, All you need to do to get the angle is to pass two objects like this var angle=this.getAngle(goodGuy,monster); Here is ...
Shuffle an Array

Shuffle an Array

Game Development, javascript, Phaser
As game developers we are always going to need a way to shuffle an array, to randomize it, to mix it up. For example a word in Hangman game or a deck of cards, or puzzle tiles on a scrambled picture type of game. And all we need to do to accomplish that is pick random places in the array and swap the values. Now as a beginning programmer I tried to say something like   array=[1,2]; array[0]=array[1]; array[1]=array[0];   To try to swap the values 1 and 2. But of course the problem here is that array[0] will equal 2 which is fine, but it erases the 1 value in the 0 position before it can be placed into place 2! So our array will be [2,2] instead of [2,1]   The correct way to swap two values in an array is to create a temporary variable to hold the v...
Phaser game.input.onUp event firing twice!

Phaser game.input.onUp event firing twice!

Game Development, Phaser, Tips & Tricks
Yesterday I was making a game for an online course I'm writing. The game has a flying cat and when you click anywhere on the canvas the cat will change position. This is the line of code I was using: game.input.onUp.add(this.changePos, this); The game was working fine on desktop mode, but when I changed to the mobile simulator on Google chrome it looked like the event did not fire at all because the cat didn't move. After about 15 minutes of trying to debug, I found that instead of not firing the event was actually firing twice. What was happening was that the browser was detecting two different events. A touch event for the device A mouse event from the browser If I had simply tested the game on mobile, it would have worked fine, because the mobile device would not have ...
Making Missiles in Phaser

Making Missiles in Phaser

Game Development, Phaser, Tips & Tricks
In this video, we look at how to make and shoot missiles in Phaser with only 23 lines of code! The basic idea is to create a sprite, the missile, inside of a group. We place the sprite at the x position of the mouse and the y position below the height of the game. Then during the update function, we simply loop through the group and subtract from the y position from each missile. This video uses the Phaser Snippets
Code Update

Code Update

Game Development, Phaser
For a few months and in my Udemy lessons, I've been detecting mobile devices by measuring the width of the screen. For a while this worked, but I've now found it to be ineffective. Sometimes a smaller desktop or laptop screen will show up as a mobile device. Here is the original Start for desktop/mobile  snippet var game; window.onload = function() { if (screen.width>1500) { game=new Phaser.Game(480,640,Phaser.AUTO,"ph_game"); } else { game=new Phaser.Game(window.innerWidth,window.innerHeight,Phaser.AUTO,"ph_game"); } game.state.add("StateMain",StateMain); game.state.start("StateMain"); } And here is the Start for desktop/mobile update isMobile=navigator.userAgent.indexOf("Mobile"); console.log("isMobile="+isMobile); if (isMobile==-1) { //desktop lapto
My First of Many E-Books

My First of Many E-Books

Game Development
I finally got around to writing my first ebook and now that I've done it it seems like why did it take me so long to do it. I think we hesitate at things that we are not used to doing. I often have a great idea for something and if it is somewhere out of what as they say my comfort zone then I don't tend to put it on the front burner it gets so shelved, or ignored. But now that I've written it, it doesn't seem like a scare thing to do them after all. I mean I think that's what separates successful people from everyone else, not because they're not afraid, but because they overcome that fear of doing things that lead them to success. I took one of my phaser games, Color Zap that I wrote for my udemy course, and turned it into an ebook. You can also find a playable copy of the game ...