Learning Phaser with Relee

[ReleeSquirrel]

Hello there! Welcome to Learning Phaser with Relee. I'll be learning Phaser for some time, and you lot reading this get to help me out and/or learn from my mistakes.

 

First up, I've already done the basics. Hello world and all that. It's very nice to put an image on the screen, but there's not much to do with it.

 

I'll mostly be focusing on top down games reminiscent of the original Legend of Zelda for the course of my learning experience. It's a game style I think Phaser is particularly suited for. As such, I'll have to do certain things. I'll need to have a little man run around the world. I'll need to have a world for the little man to run around in, that's not empty.Those are the basic goals we'll be starting with. We'll worry about enemies and fighting later.

 

I'm pretty confident about my ability to make a little man who walks around, both from the tutorials and examples, but I'm not so confident about the levels. What is a level? A miserable pile of tiles! I want to be able to plop and pluck a pile of tiles from world space at a moment's notice. As such, my first experiment will be trying to make a group of seperate game objects operate as a single whole.

 

Near as I can figure, that's what the Group class is for, isn't it? There's 21 examples of grouping, so hopefully I'll be able to figure it out.

 

First up I'll copy some of the basic code to get Phaser up and running, then I'll follow this example to try and make a group: http://gametest.mobi/phaser/examples/_site/view_full.html?d=groups&f=create+group.js&t=create%20group

 

I worry though, since the example seems to be meant to draw ten sonics at random and it only seems to draw one in the top left corner...

 

Anyways the first thing I do is create a game object, and the second thing is preload my image in the preload function handler. In this case, it's a zelda style block I made a long time ago.

 

Next I make a variable to hold the group, and after that I create a new group object and assign it to that variable.

 

Then I add a bunch of new sprites to the group. Odd, it doesn't have any code where the group is put on the screen. Is it normal for groups to immediately be in world space?

 

Oops, now I've got an error in phaser.min.js

 

"Uncaught TypeError: Cannot read property 'style' of null" it says, at line 7. Maybe if I use the regular Phaser.js instead... No, as expected it has the same problem.

 

My experiment hasn't deviated in any significant way from the example. I wonder what could be wrong? I'll start commenting out bits until I find the problem code. First everything, to make sure it runs fine with just phaser... yeah that works fine.

 

Next creating the blank game. ... Huh, that's it. All it takes is this line to get that error.

var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create,update:update });

copied straight from an example, too.

 

I'm not sure why this could be happening. I did update to the newest version of Phaser that was released today. I'll go back and try the more basic "Hello Phaser" example using the new Phaser.

 

Okay, Hello Phaser works fine. There's one notable difference between it and my program, the whole thing is encapsulated in a window.onload function, so I'll try that.

 

Nope, no difference.

 

It just doesn't make sense! Why is this happening on one and not on the other when there's so little functional difference between them?

 

I'll try copying over the game instantiation from hello phaser and see what happens.

 

And that worked. So, what's wrong with my game instantiation?

 

I've added a space in the json bit to match, and removed the name, and that seems to have done it. Very frustrating. This is what it looks like now:

var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });

Alright then! Now I'm going to uncomment all the other stuff and see what happens.

 

It works fine! That's great. What a relief. I'm still not sure what was causing that bug earlier, if it was having a name in the '' or having no space between update:update but it's fixed now thank goodness. Nothing worse than an error that you can't figure out the cause of.

 

I've gone ahead and put my eight tiles in the middle of the world space to demonstrate that groups can be moved together, and I'm also increasing its rotation to make it spin. Nice work on the rotation, guys. Very smooth.

 

That satisfies my need for moving groups, but it raises a problem. Why are groups automatically rendered in the world space? I was hoping to have something like an array of groups representing different rooms, and plopping them down into world space as the player moved about. What do I do?

 

What's your advice? I'll check it next time on Learning Phaser with Relee. For now it's naptime.

 

Watch today's example spin around here: http://storage.electricsquirrel.net/phaser/FunWithGroups/

[rich]

The 4th parameter is the ID of a div tag in the HTML page to insert the game into. At a guess I'd say you don't have one, so setting it to '' fixes it.

[ReleeSquirrel]

Yeah that's definately what was wrong.

 

Say, you're the one putting this whole thing together, do you have any advice for creating groups of game objects outside of the world space to be added all at once? Or would you say that's a bad idea to begin with?

[rich]

Groups are designed for pooling objects for re-use (or delayed use), beyond that it depends entirely on the game itself as and when you should be doing this. There's no "one size fits all".

[personalnadir]

Ah, I've just got hung up on this issue too! Perhaps that needs to be added to the examples page, or is it possible to catch the error so the create function states what the problem is?