Phaser Games and Tutorials
My latest Phaser Tutorials
Making objects hit the ground One of the great things about Phaser is the physics engines that you can use with it. In this post, I'll show you how to use gravity on an an object. I'll be using the Utility template to set this up. Although we don't need any of the features for this example I'm going to build on this post, so we may need them later. Preload the images First, let's preload in the images we are going to need. Let's keep it simple. A ball to drop with gravity and a block that we can ...Read More
How to extend a sprite in Phaser 3 Sometimes just adding a sprite into a game is enough. Other times it is very useful to extend a sprite. Why? Being able to do this will let us get super organized. That allows us to build games faster and better. We can make complex classes that extend Phaser game objects such as sprite, text or images. Most importantly we can reuse the code! In my experience using classes allows us to do more by writing less code. If well written, the class can be transferred from one game to another without ...Read More
In this final part of my series of Phaser Form UI, we will look at adding drop downs to the form. I originally came up with this for adding a form to report abuse in a virtual world. It can also be useful for choosing a range of options when starting a game, especially if there are too many to display with buttons or other graphics. This project builds on the code written in the other 2 blog post of this series. Adding input text and adding HTML buttons. Adding the drop down to the html First let's add a ...Read More
How do you get the height and width of a container? If you've been playing around with Phaser 3 containers for a while, and are accustomed to using Phaser 2 groups, you may notice some familiar things missing. A few months ago I added some sprites to a container for building some user interface components. I needed to know the container size, so I could line things up properly and found that the width wasn't set. Here is an example of what I mean. First let's start by preloading some images, and placing them on the stage and adding them ...Read More
Why use HTML buttons in Phaser 3? Normally I use images for buttons in Phaser, but if I'm using other form elements, like input text, sometimes it makes sense to use HTML buttons. It also allows me to use CSS styles on the buttons. This can be important because many times I'm handed designs by UI designers who don't understand the difference between canvas and non-canvas design. Adding the buttons Building on the first part of this series, I've added two HTML form buttons in the HTML with the ids of 'btnSend' and 'btnCancel'. I've also added some bootstrap classes ...Read More
New To Phaser Development?
Take the Phaser Basics Mini-Course
My name is William Clarkson. I’ve been writing code for about 30 years now and am currently employed as a game developer for Gaiaonline.com where I am writing Phaser games and apps every day. I’ve been working with Phaser for almost 2 years now and am quite impressed with it. I am actively working to replace a lot of the flash work I did in the last 6 years with Html5 content and this is the library that is working well for me. Within two weeks of starting Phaser, I was creating games just as fast as I had done after 15 years of flash!
What would you like to learn?
If you have questions, a suggestion for what you’d like to see in a post or need support there are links to groups, or just feel free to contact me. I love talking about code especially when it comes to games. If you are into making Phaser Games already then please check out our Phaser Game makers group.
Recently Phaser 3 was released. I am scrambling to update the site with resources while balancing my day job. You’ll find plenty of Phaser CE items here, and the list for Phaser 3 will continue to grow as time goes on. If you’ve any specific requests about Phaser please contact me, and I’ll do my best to accommodate.