William Clarkson, Author at William Clarkson

May252017 by William ClarksonNo Comments

Complex Objects – Phaser

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...

May152017 by William ClarksonNo Comments

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...

May52017 by William ClarksonNo Comments

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...

May32017 by William ClarksonNo Comments

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 ...

May22017 by William ClarksonNo Comments

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...

May12017 by William ClarksonNo Comments

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 =

Apr182017 by William ClarksonNo Comments

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

Apr72017 by William ClarksonNo Comments

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

Apr32017 by William Clarkson1 Comment

Connecting….

Thoughts

I don't have a large youtube following 64, at present count, and I've no idea how many people read my blog. I'm ok with that because I'm not trying to reach thousands of followers, I'm trying to reach you. You, and people like us. We are creators, artists of code and the web. We want to build something. There are not that many of us. We are vastly outnumbered. The way I know this is I went to look for a microphone a few weeks ago. If you go into a store to buy earphones, no problem. I've found earphones at gas stations, dollar stores, and supermarkets. If you do find somewhere to buy your microphone, like Walmart or Target, you'll have trouble finding one without the earphones attached. This is because there are far more consumers of content than there are people creating it. No...

Mar242017 by William ClarksonNo Comments

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 ...