Newbie looking for pointers

[Meowts]

Hi,

 

So I have a couple of things that I'm trying to accomplish, and I'm not sure if I fully understand what needs to be done. Also curious about how to approach certain things...

 

I'm creating a fairly simple banner game, and issue #1 is that it takes a good 10-16 seconds to load the game. It gets hung up on loading phaser.min.js... my first thought was to only load the parts of the framework I'm using, however in total the files end up being nearly three times the size as the minified version, so before I go ahead and link up every file, is that a common/reasonable approach to take?

 

My second thought was to plug in a loading bar to at least give a nice visual while loading... I looked around, and found what looks like a great approach here:
http://www.html5gamedevs.com/topic/1198-downscaling/?p=7567
However, this leads to a few more questions... the idea of separating the boot and preloader into .ts files... I guess what I'm wondering with all this is, would it make sense, or would it be more efficient to break out the framework like this? Would it also be possible to call the load.onFileComplete.add function in the usual preload() function?

By the way, so far my understanding goes as far as linking up phaser.min.js, having preload(), create() and update() in my main game.js file and just working from there, based on the first tutorial example. I get this feeling that there might be some more advanced approaches to this, which is why I'm asking all these silly questions haha.

 

The last question I have for now is forcing landscape on mobile... so far it seems like I'd say something like:

if (game.device.android || game.device.iPhone){  game.stage.scale.startFullScreen();  game.stage.forceLandscape = true;  game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;  game.stage.scale.refresh();}

... in the create() function. This however isn't doing the trick, and again, I feel like I'm missing something here.

 

Btw, if you've read this far, thanks for bearing with me here hahaha. This is my first plug at game development, just coming out of school for programming. I'm doing this for an internship so I'd like to learn as much as I can about practices and approaches!

[Heppell08]

I believe you would greatly benefit from learning states and splitting it all up. Having a boot.js, preloader.js, game.js etc. You can have the boot.js do all the work for recognising the device and screen stuff before even reaching the game. You can have that preload bar running in the second state loaded which is the preloader. It will load all the assets and show on a loading bar of your choice. As for the 16 second load time on minified phaser I have no idea other than maybe browser lag? I get load issues when the browser is running a lot more than it needs. That's why I left chrome and WAMP and started using node-webkit. Framerate is great and it only runs what you put into it. Basically have a good read through the forums and see if something pops up that's useful. I would highly recommend using the state set up though. Have a look in the phaser files for the basic state set up in resources/basic.

Hope this is helpful to you

[Meowts]

Thanks Heppell, that's the pointer I needed!

 

I didn't realize that there might be an issue with the Chrome/WAMP setup! I'll definitely check out node-webkit.

[Heppell08]

Glad to be able to help

[Meowts]

Ookay, I'm liking the way this is organized, this is my first look at "classes" in javascript. Did some research, but there's something I'd like to clarify...

 

When using variables that are being set in create(), then called in update(), what I had done in the "one file" solution is create global variables outside of all functions. What I think needs to be done here is add these variables as properties(?) to the class, and call them with "this.". Example:

BannerGame.Game = function (game) {    this.game = game;    this.currentBall = 0;    this.balls = [];    this.ballsGroup = null;};

Then in create(), I assign these variables, as such:

this.ballsGroup = this.game.add.group();var ball = this.ballsGroup.create(110, this.game.world.height - 130, 'ball');ball.body.bounce.y = 0.3;ball.body.gravity.y = 6;ball.inputEnabled = true;ball.events.onInputDown.add(this.accelerate, ball);this.balls.push(ball);

So to me it would seem these are all in place and looking good. However, in update(), where I say:

if(this.balls[this.currentBall].bottomRight.x > this.game.world.width - 580){

it keeps coming up with an error saying "Cannot read property 'bottomRight' of undefined". I can't tell if I'm missing something about javascript's "OO" structure, or if it's something to do with the way Phaser works. I am using a lot of global variables in a bunch of different functions... one thing I haven't tried is declaring the global variables outside of everything here. For some reason that doesn't sound like the right solution though... thoughts? Help?

[george]

Hi Meowts,

Your example falls down with a wrong class definition but you left that part out. Can you give us details ?

I can tell you that creating a class for a state is the way to go in larger projects. You really do not want to pollute your so called global namespace with variables from all over the place. That's calling for problems. The examples of phaser are reduced so you can quickly grasp the actual story in the example. It's not (very) best practice.

 

Have you also checked all involved variables itself, maybe you're just facing some kind of out of index problem with your array 'balls' access with index this.currentBall ?

When I face a problem like this the first thing is to place some console.log('balls', this.balls, 'ball', this.currentBall) calls or set a breakpoint so I can check the content of a variable. Have you tried this ?

 

If the class implementation is your problem, maybe this helps you:

//your constructorwindow.GameState = function(game){  console.log('GameState created')  this.ballCount = 0}//the methods in your classGameState.prototype = {  preload: function(){    console.log('preload')  },  create: function(){    console.log('create')  },  update: function(){    console.log('update', this.ballCount++)  }}var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', GameState);

If you need a compact introduction to OOP read this very recent document from mozilla. 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

 

And maybe to fill some other gaps in the JS language read this:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript

 

These articles about JS & OOP a are great write-ups. I wished I had those resources in the beginning

 

Regards

George

[Meowts]

Thanks George! Long story short, I have my game up, in that architecture, loading WAY quicker, and got the loading bar working... all it took was understanding the strange and mysterious ways of JS OOP hahah.

 

I was impressed with Phaser before, but now that I understand how game states work I'm just elated knowing the potential! I noticed in another thread that there was talk about a tutorial on this architecture being in development... I think starting off with this would have saved me a lot of headache! Granted I am just a newb, but as such going with the first example (using the one file solution) indicated to me that this was the way to do it... just an FYI on my experience so far! Man this makes me happy.

[george]

Just by reading your short story I can feel the 'click' that happened to you! Good luck and enjoy a new and fun world to discover Happy thinking, happy coding!

[Meowts]

Haha I can be verbose.

 

Thanks for your help!