In this article I follow phaser.io/tutorials/making-your-first-phase.., developing a small platform game. A platform game is a game where the user jumps between platforms, collects stuff, and avoids/fights enemies.
In my first post I called phaser a "game engine", and here they describe it as a "game framework". That might be the same, I'll need to research it. Phaser helps us develop games specifically for the browser using a JavaScript API.
I copied the folder I made for my previous article [[02 starting with phaser]] and extracted the zip file from the tutorial into a solutions folder. I prefer to write the code myself instead of copy-pasting or just having it present. So I use the zip file for the assets in case something doesn't work.
part1.html file has the basic structure as we talked about in the last post, along with an update function, so let's just move its content into index.html. I do copy-paste this time because we already went over this code.
It's fun to read and see that some of my guesses were right.
Going into part 2 I see that as I guessed the preload event is when you load your assets and name them. We load 4 images (this.load.image(alias, url)) and we also load a sprite sheet. If sprites are the same as in web dev, we don't use them often these days, but in the past, they have been used the make loading faster, so you load the same image once, and just show part of the sprite. It's a big image, separated into frames, where each frame is its own image. I guess in Phaser it's used to support some animations.
In this case, it's the different states the character can have.
The create function is run when the scene is created and here we will add the loaded images to the screen. The syntax is this.add.image(x, y, alias) where x,y are the coordinates where the center of this image should be. So to add an image that will cover the whole 800x600 scene we need an image in this size and put it on 400, 300
Images will be added in the order they're called. If add star before sky, the sky will cover the star.
I tried moving one of the this.add.image calls into preload. It just fails silently, but you can see on the screen something:
Reading through part 3 of the tutorial, we encounter a few words we need to understand:
- Scene
- Game object
- Camera
I'm leaving these for later until we understand them fully to try to define them. We also have a list of questions to answer from [[02 starting with phaser]]
ok, I encountered my first problem - platforms = this.physics.add.staticGroup() throws an error about this.physics undefined. Let's see what we missed...
It seems like I didn't miss anything until now, at the next paragraph we add a physics definition to our config:
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: false
}
},
The next part of the tutorial talks about physics.
I actually stopped here and had a day or two of rest, and I figured out a few things about my learning process and this blog. or I realized a few things that I want to check.
I realized that going through the tutorial step by step isn't that interesting, for me or for anyone who's going to read this blog (hey future me...), instead I use this blog to document my learning path, how I overcame different bumps in the path, what directions I chose, things that reading this blog in 6 months, I can say, "wow, so much progress", or not, maybe something like "I could take this path instead".
Anyway, since it's my first tutorial, I will continue writing about it, and we'll see what posts I have in the future.
A physics system means a framework that simulates different physics rules and definitions, like velocity (speed), and space. Phaser comes with 3 different built-ins:
- Arcade
- Impact Physics
- Matter.js Physics
The differences between them are not so clear to me, even after googling phaser arcade physics vs matter . Arcade seems like the default and the simplest, although some on this article are saying it's quite capable. Sounds like Matter.js is a full engine and very complex, so while I can do stuff that I can't do with arcade, it will be hard to do it. Impact requires windows(?) to run.
For now, we stay with "arcade".
A physics sprite (an element created with this.physics.add) has a body property that matches the actual body in our scene and has different properties like gravity (I imagine mass when reading the explanation), and probably more stuff.
Game objects are objects that are drawn on the scene. They can be moved, collide with each other, and react to events.
A collider is an object that manages collisions between game objects. to create one we call this.physics.add.collider(object1, object2) when each object can be a list of objects too.
Part 7 of the tutorial goes through controlling the player. For that, we have the update event, which runs on every new frame. here we can check which key (or set of keys) is clicked and respond to them.
Now I can actually move around and jump between platforms!!! I wonder how to make it controlled with touch, so I can control it on my mobile phone.
Part 8 will add stars to the game and allow the user to collect them. Now need to add some way to track these.
That's actually the next part where we add text to show the score. I also show "Done" when all the stars are collected. Maybe I can also add sound?
Last part - adding an enemy. They add a pretty interesting idea, where instead of stopping the game after the collection of all the stars, more stars will appear, but with them a small bomb, that will jump randomly across the scene and if the player touches it, it's game over. every time all the stars are collected, it will add another bomb. So the challenge of the game is to collect stars with more and more bombs appearing.
Ok, I think I have enough to start the pong project. Somethings I want to add, but I can also add to my pong game:
- support for mobile.
- sounds
- effects
- using a nice structured project instead of having global variables, etc.