code structure frameworks

[michahell]

Hi!

 

This is a question i have been asking myself for a while: What framework are you guys using in combination with a library like Pixi to create games? Do you only use Pixi, do you use Pixi + angularJS or Pixi + some very tiny MVC framework?

 

Why i ask this is because every game has different screens. for example, a title screen and a main game screen. then there can be a 'how to play' screen, highscores, etc. etc.

 

I am currently looking into AngularJS (mostly because i want to have an excuse to finally start learning it) scaffolded with Yeoman. Is there maybe even a Pixi generator i am not aware of? that would be awesome.

 

Thanks for any advice.

[Mike]

I'm using Phaser , and Phaser uses Pixi as renderer.

 

The "screens" you said are actually states of the game, there is Basic template example where you can see code organization: Boot, Loader, Main Menu, Game state...

 

Also there are topic How to extend objects, and make you own "classes" and so on...

 

Couldn't share experience with AngularJS since i don't have any. 

[d13]

Angular is used to synchronize data binding between a web client and server, so I doubt you'd find it useful for games.

Most games run in an event loop which manages all the game data in once place at the same time.

That means the problem that Angular is designed to solve for the web doesn't exist for games.

Games also tend to be built using a loose MVC framework: Sprites are the `M`, the rendering engine is the `V` and the event loop is the `C`.

So you don't have to use an explicit MV* framework like Backbone of Knockout.

Instead, you just make sprites as data objects, control them in the event loop, and display them in the render function.

[michahell]

Yeah i just started reading about Angular, it really solves the problem of CRUD webapps, not really useful for games.

Something like Phaser sounds right on! i'll try that.
Hmm, i don't really agree with viewing games as being some sort of MVC framework by default, you still have to manage at least some

sort of different screens somehow. That should be structured in some way, and you might also need a lot of classes / objects for things

in your games, they might be Sprites but they might be more than Sprites.

I'll check out phaser, thanks!

[1-800-STAR-WARS]

A common game development pattern is the use of entity component systems - here's a popular one: http://www.ashframework.org/ (js port: https://github.com/brejep/ash-js)

[harrywatson]

Hi, Micheall,

 

Had trouble with 'screens' also as I'm looking to create point and click adventure games

with animations and embedded mini games, not much out there related to 'change scene'

type code. I've done php mysql stuff but I'm new to javascript.

 

<a href="http://harrywatson.altervista.org/momo/index.html">This is my first attempt >></a>

 

It's far from perfect, I hope I haven't misunderstood what you're looking for. This is just

a basic screen changer that redraws the canvas element.

[altergo]

Didn't get an answer.. Where is this example about code organizing? and screens

[Antagonist]

I wrote a framework , a small one ( only I'm using it ). But it is based on "screens" and I wrote my own Navigator "class" that stacks the screens , and there are also animated screen transitions.

This helps a lot to keep the Menus and all other screens separated. And I also made it event based by adding some methods on_screen_show() , on_screen_hide() etc.

 

You can take a look at my code , or ask a further explanation on how things are done.At least for the ones that I know  .

 

Any way you take a look a this free online e-book , http://gameprogrammingpatterns.com/ , It's MUST READ if you ask me .It can help you organise the code even further.

[Deban]

Talking with broad strokes, you are looking for a state machine.

 

The simplified version of the logic is this:

You have a state manager, which takes control of the game loop, updates the current state and check the conditions to change states.

 

How you implement it, is totally personal, use the way you feel comfortable. Maybe you check some bools to see if a state changed, maybe you call a method of the state manager from the state, maybe you use events.

You can also make transitions between states, as Antagonist said.

 

The best way, is the way that makes you code faster, and that is personal.

[Antagonist]

Talking with broad strokes, you are looking for a state machine.

 

State machine will not help that much keeping the code in order , it will for sure make it more readable , but the main benefits will be to prevent bugs.

You will avoid gordian knots 

[harrywatson]

Umm ok apologies if this topic has been resolved or if I'm barking up the wrong tree but 'screens'

has been, and is, a topic I've struggled with since I started and there was no obvious answer

out there.  

 

So far I've come to this:

 

In my index.html I have:

                                    <script src="main.js"></script>                                    <script src="scene1.js"></script>                                    <script src="scene2.js"></script>                                     body.onload ="init()"

main.js loads all the assets and contains collision functions

and other functions that can be reused throughout the game.

Any code at all that doesn't need to be re written.

                                                           function init() {                                                           canvas = document.getElementById("gamecanvas");                                                           stage = new createjs.Stage("gamecanvas");                                                            //load assets etc..                                                             function squareBump(x1, y1, w1, h1, x2, y2)// RECTANGLE COLLISION                                                            {//x1, y1 = x and y coordinates of object 1                                                             //w1, h1 = width and height of object 1                                                             //x2, y2 = x and y coordinates of object 2 (usually mid point. Use regX and regY)                                                             if ((x1 <= x2 && x1+w1 >= x2) &&                                                             (y1 <= y2 && y1+h1 >= y2)){                                                               return true;}                                                               }//(a very nice little collision function by the way, use in any framework)                                                               canvas.addEventListener("click"   function (event){                                                               ///clear the canvas here according to your framework etc                                                             scene1();    /////NEXT SCENE/////                                                              });                                                              }// end init

Then in scene1.js

                                                            function scene1(){                                                             ////// everything in scene 1                                                              nextSceneEventImageOrWhateverYouWantToUseToGetToTheNextScene.addEventListener("click"function(event){                                                              scene2();                                                                });                                                                 }//end scene 1 

Sorry if this is too obvious or not useful. I'm very new to js. 

[Deban]

Don't paste all your code like that, it's really painful to read.

Use something like jsfiddle.net, codepen.io or jsbin.com

 

Or at least, use the code tags.

function squareBump(x1, y1, w1, h1, x2, y2)// RECTANGLE COLLISION{ //x1, y1 = x and y coordinates of object 1  //w1, h1 = width and height of object 1  //x2, y2 = x and y coordinates of object 2 (usually mid point. Use regX and regY)  if ((x1 <= x2 && x1+w1 >= x2) &&      (y1 <= y2 && y1+h1 >= y2))    {return true;}}//(a very nice little collision function by the way, use in any framework)

My eyes would really appreciate it.

[harrywatson]

Ok Changed, thanks Deban ...

[alex_h]

 

take a look a this free online e-book , http://gameprogrammingpatterns.com/

 

Wow that looks like a good read! Thanks for the link.