Tutorials

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
Complex Objects – Phaser

Complex Objects – Phaser

Phaser, Tutorials
Most of the time when we are writing games in Phaser we are using simple objects like a sprite, text, or a button. I really enjoy writing in Phaser, but sometimes I miss when I use to make flash games and I could create a lot of different elements within a class. While I can not do exactly the same thing with Phaser, what can be done is to create a function to make a complex object. A complex object is simply my phrase that I use to describe a group containing child elements. In this way, I can basically get the same result that I did in flash. In this example below I have written a function that makes a button object, which in this case is not the buttons built into the Phaser framework, but a group that contains a text field and a sprite back. This is useful in situations where you do...
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...
Faking a Swipe in Phaser

Faking a Swipe in Phaser

javascript, Phaser, Tutorials
One of the advantages native programs like Java for Android or Swift for IOS has over web languages like HTML5 is having built-in detection for detecting swiping. But with a little bit of coding, we can detect the actions of a swipe. For that, we need to break down the action of a swipe The user touches the phone (mouseDown) The user moves a finger across the phone The user lifts their finger(mouseUp) Example Code var StateMain = { preload: function() {}, create: function() { // // // game.input.onUp.add(this.mouseUp, this); game.input.onDown.add(this.mouseDown, this); // // this.text1 = game.add.text(game.world.centerX, game.world.centerY, "swipe left or right!"); this.text1.fill = "#ffffff...
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...
Generate a random string in Javascript/Phaser

Generate a random string in Javascript/Phaser

javascript, Phaser
One of the thing I’ve had to do commonly over the years in making games is to be able to generate a random string. Now lot of times I do this on the server side of code to be able to generate a none, one time use code. But there are times where I have had to do it on the client side maybe to generate a password would be a common use of this, or it could be having to guess what the random letters are in a mastermind type of game. It's a very simple thing to do. All we need to do is to define a set of letters or symbols characters for the program to pick from. We decide on a word length and then loop through that many times pick a random index from the length of the set and then concat a string with that. Here's the outline of the code. make a random string of letters var letters =
Flash To Html5

Flash To Html5

Phaser
I've just released my new Udemy course and offering 88%-100% discounts. Are you a flash developer who wants to be able to make cool content to show everywhere? Would you like to turn your flash skills into a new skill to have in your toolbox? This is not a post on bashing flash! I absolutely loved flash! I worked in Flash for 15 years making my living in it I wrote over 300 games in that time. I even had my picture taken in front of adobe that's how much I cared about Flash. Then about a year ago, everything came crashing down I realized I was no longer able to make a living and doing what I loved. I tried moving on to other Technologies. At first, I tried Android but you can only right that for Android devices and I was looking for something that like Adobe told us years ago Writ
Sprite Characters with Keyboard Control

Sprite Characters with Keyboard Control

Phaser, Tips & Tricks, Tutorials
This is a project I made in response to a request on youtube to show how to make an animated sprite controlled by the keyboard. We can do this with just a few steps. 1. load the image 2. set up the animations 3. detect keyboard presses 4. change the robot's position 5. adjust the speed 6 change the direction of the robot's graphic from right to left Here is the final result To follow along with the video you'll need the basic template, the phaser snippets and the image below   Here is the robot sprite sheet image Or Free to newsletter subscribers
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 ...