Latest Posts

  • Phaser Coding Tips 7

    Phaser Coding Tips is a free weekly email – subscribe here.

    phaser-tips-header1

    Welcome!

    Shmupjam is a game jam dedicated to creating shoot-em-up games. As it’s now in full flow I figured it’d be great to see some Phaser entries for it. Therefore this weeks Coding Tips is dedicated to all things bullety and shooty.

    Get the source

    I’m only going to highlight the most important parts of the code here. So please always look at the source first. If you’ve questions about something I didn’t cover then ask on the forum.

    Run / Edit the code on jsbin or codepen

    Clone the phaser-coding-tips git repo.

    lets-code-header

    Infinite Ammo

    The whole point of a shoot-em-up is of course shooting things. For this you need bullets. Lots of them. Creating new objects in JavaScript (or indeed any language) is expensive. So what we do is pre-build all our bullets up front. Then as they are fired, they move across the screen and once outside we free them up, putting them back into the pool, ready to be reset and fired again as needed. This way we don’t generate any new objects at all during the game loop.

    To manage this I’m using a single Bullet object. This is essentially a Sprite with a couple of extra features:

    The first line tells Pixi to use nearest neighbour scaling. This means when the bullet is scaled from its default size it won’t be automatically ‘smoothed’ as will retain its pixel crispness.

    The checkWorldBounds and outOfBoundsKill lines pretty much do exactly what they say. They will check if the bullet is within the world bounds and if not kill it, freeing it up for use in the bullet pool again.

    The tracking property tells the Bullet to rotate to face the direction it is moving in, as it moves. This is handled in its update method. Finally scaleSpeed is how fast the bullet should grow in size as it travels. Both of these settings are used by some of the weapons as you’ll see shortly. Read More

  • Phaser 3 Development Log – w/e 14th Feb

    phaser3-bunnies

    Development of Phaser 3 is already under way. I asked Pete Baron, who is doing the core work on the new renderer to sum-up each week of development. Here is his latest report:

    Phaser 3 Renderer Progress

    All source and examples can be found in the phaser3 Git repo (and here is the commit log)

    The demos can be found here

    canvasToGl demo

    Rich mentioned that being able to transfer Canvas to WebGL textures is very important for a number of use cases, so I took a stab at wrapping it in a fairly accessible API call and did a few performance tests. It seems like the bottleneck will be texture transfer, the rest of the code is relatively simple and isn’t doing a lot of stuff that will likely stall the GPU. The new demo has one Canvas texture (underneath the WebGL window) with a constantly changing background colour and a once-per-second number increment. In the WebGL window you can see the same texture transferred onto 10 separate WebGL textures, applied to pbSprites, and bouncing, scaling and rotating. This demo seems to slow down oddly when the window is not focused… I need to look into that (but it’ll be tough because it doesn’t do it when focused). Read More

  • Phaser Coding Tips 6

    Phaser Coding Tips is a free weekly email – subscribe here.

    phaser-tips-header1

    Welcome!

    Back in the late 80s I was utterly captivated by an Usborne range of programming books, one of which was Computer Battlegames (for the ZX Spectrum, et all).

    cover

    The front cover and illustrations within this book promised great things! In reality only one game in the entire book even had any graphics (everything else was text mode). But that didn’t stop it firing my imagination.

    For this weeks coding tip I’ve taken one of the games from the book and bought it into Phaser.

    Get the source

    I’m only going to highlight the most important parts of the code here. So please always look at the source first. If you’ve questions about something I didn’t cover then ask on the forum.

    Run / Edit the code on jsbin or codepen

    Clone the phaser-coding-tips git repo.

    lets-code-header

    Shootout

    “You are standing back to back. You take 10 paces, turn and reach for your guns. How quick are you? Can you shoot first?”

    That was the blurb from the original game in the book. It accompanied 15 lines of code and a lavish spaghetti western style illustration. For our rendition Ilija has given it a pixel art look instead.

    shootout

    The game consists of just 1 image, which we’ll change the texture of, some text and a bunch of timers to handle the shooting.
    Read More

  • Phaser Coding Tips 5

    Phaser Coding Tips is a free weekly email – subscribe here.

    phaser-tips-header1

    After a couple of weeks spent working on platform game mechanics I felt we ought to take a small break. Therefore this weeks tutorial is based on an often requested feature on the forum: grid movement. Or more specifically, “How to move around a grid smoothly like Pacman”.

    We’ll cover the code needed to gracefully slide around a tilemap, turning on a dime and create the full core of a Pacman game.

    Get the source

    I’m only going to highlight the most important parts of the code here. So please always look at the source first. If you’ve questions about something I didn’t cover then ask on the forum.

    Run / Edit the Cars code on jsbin or codepen
    Run / Edit the Pacman code on jsbin or codepen

    Clone the phaser-coding-tips git repo.

    lets-code-header

    The Basic Set-up

    We’ll need a player sprite and a tilemap. The tilemap contains the layout of the level. Here we’ve drawn a simple level in Tiled:

    tiled

    This is exported as a JSON file and loaded into our game, along with the tileset. In the create method we set our objects up:
    Read More

  • Phaser Coding Tips 4

    Phaser Coding Tips is a free weekly email – subscribe here.

    phaser-tips-header1

    Welcome!

    This week we carry on building on our set of platformer game tools. Last time we created platforms with specific friction, but this week we’re creating platforms you can ride: commonly known as “cloud platforms”.

    Get the source

    I’m only going to highlight the most important parts of the code here. So please always look at the source first. If you’ve questions about something I didn’t cover then ask on the forum.

    Run / Edit the code on jsbin or codepen or clone the phaser-coding-tips git repo.

    Read More

More posts to tickle your grey matter ...

Page 1 of 8812345678910...Last »