The Monthly Phaser Examples Contest

[rich 2612]

To celebrate the launch of Phaser 1.1 and our new Examples Suite I'm going to run a little monthly contest.

 

Submit your best examples to us for inclusion in the Examples suite - and every month we'll pick one that we think is the cream of the crop and you'll win a $50 Amazon voucher.

 

The examples don't have to be too elaborate, after all these are meant for other developers to learn from. But they do need to be well structured include plenty of comments, perhaps showing off just a collection of functions really well.

 

To submit just issue me with a pull request, or if you don't like using git you can just email me the js file or a link to it. Make sure the example has your name in the comments at the top of it, so people know who made it and how to contact you should you wish.

 

Please understand that if you send me an Example you're giving me permission to include it in the Phaser repo even if it doesn't win. The monthly draw will take place from the 1st of the month to the last calendar day.

 

If there are lots of really good examples then I reserve the right to award multiple prizes and/or hold an example back for the following month.

 

So please.. let's see what you can do!

 

[Mike 56]

This is a wonderful way to get support from the community and I hope to give something useful for everybody too.  

[rosancoderian 0]

very interesting!
is there any specific criteria for this contest?

[Rudrabhoj Bhati 56]

Would be good idea to try xD

[rich 2612]

There's no specific criteria but if I had to list some I'd do:

1) Use assets from the assets folder where possible. If you need to add your own ensure they are copyright safe.

2) Don't rely on any third party libs (unless your example is to show use of them)

3) Keep it simple. The award isn't for complexity, it's for how useful it is to game devs.

4) Pull request, email it or post it here.

5) You can enter as many times as you wish.

[meanderingleaf 9]

Whats the due date for month 1?

[rich 2612]

Because we only released last week it will be the end of November.

[kass 2]

cool i already have something i'm working on that could be perfect for this!

[jpdev 225]

I have send you a pull request for my golf game (http://janpeter.net/golf), so it can become part of the phaser examples and my submission for this contest.

[jerome 1734]

very nice game !

[jerome 1734]

Hello Rich,

 

Here's my small contribution to examples.phaser.io if you wish : an example about states.

This code only uses assets from the repository and has got comments.

It doesn't do anything else than switching states "boot", "menu", "game".

It's very simple and intended to teach the way they work.

 

As the name "game" may be confusing for people (global var or state property ?) I deliberately use "myGame" for the game variable. This differs from other examples where the main game variable is usually called "game".

 

This code should work out-of-the-box from the examples.phaser.io web server as I wrote assets URL from this origin.

Feel free to adapt as you want.

 

I don't claim any voucher for this if you select it ! it's just a free contribution.

states.js.zip

[valueerror 144]

hello everyone..

 

i'd like to make some sort of contribution so i'm going to post my (future) examples here..  i already got one that could be useful to someone.. maybe it finds it's way into the official phaser examples 

 

i made a simple virtual gamecontroller with phaser buttons  (they work on mouse input and touch input)

the assets (buttons, background, animations) used in this example are made by myself  - although super mario of course is artwork by nintendo and the basic image is copied from "paper mario"

 

you can try it here:  http://test.xapient.net/phaser/gamecontroller/  

download it here:  http://test.xapient.net/phaser/gamecontroller/gamecontroller.zip

and look at it here:

 

EDIT: i made a few changes to the buttons (they now have a hover state and the diagonal buttons are a spritesheet now (much cleaner) also i tried to catch a bug where on mobile devices a button gets stuck in the "pressed" state..  (so v.0.2 it is ^^  - links updated!)  

[valueerror 144]

so here is an example for moving plattforms made with P2 physics.

 

these platforms are very common in typical platformer (jumpNrun) games..

 

testcase:

http://test.xapient.net/phaser/movingplatform.html

 

code:

platformV = game.add.sprite(200,  300, 'platform');     game.physics.p2.enable(platformV);    platformV.body.kinematic=true;    game.add.tween(platformV.body.velocity).to({ y: '+100' }, 2000).to({y:'-100'}, 2000).yoyo().loop().start();

 

in this 2nd example i'm using a custom function to move the platforms instead of tweens. this allows me to move the platforms exactly between 2 given points with a constant velocity

http://test.xapient.net/phaser/movingplatform-withouttweens.html

 

 

screenshot:

[valueerror 144]

in this example i made moving platforms again but this time you can jump through from below and land/stand/walk on at the same time..  (two different approaches in the source code)

 

http://test.xapient.net/phaser/ALL/jumpthrough.html

[valueerror 144]

this example shows how i use materials (and collisiongroups) in combination with a tilemap created with tiled with two different layers  (it's also a showcase that p2 physics introduces a problem for platformer games - you can easily stick to a wall even if its ice )

 

http://test.xapient.net/phaser/ALL/sticktowall.html

[valueerror 144]

thx to the really great example from the user jp91

 

i was able to create this IMHO easy to follow example for  how to create a rope with rectangles

thank you JP

 

 

testcase & code with comments:

http://test.xapient.net/phaser/ALL/ropes.html

 

 

[rich 2612]

Submit to examples repo?

[ctmartinez1992 5]

Made a simple Fade Out Fade In State transition method or, how i llke to call it FOFIST!

 

Put this code in a separate file and call it something like Fade.js

function Fade() { }/*** @parameter {nextState} - String - The state you want to move on to* @parameter {time} - Integer - (OPTIONAL) time it takes to make said transition*/Fade.fadeOut = function(nextState, time) {    this.nextState = nextState;    this.time = (time === 'undefined') ? 500 : time;        var bg = game.add.graphics(0, 0);    bg.beginFill('#000000', 1);    bg.drawRect(0, 0, game.width, game.height);    bg.alpha = 0;    bg.endFill();    var tween = game.add.tween(bg);    tween.to({ alpha: 1 }, this.time, Phaser.Easing.Linear.None);    tween.onComplete.add(        function() {            game.state.start(this.nextState);                        var bg2 = game.add.graphics(0, 0);            bg2.beginFill('#000000', 1);            bg2.drawRect(0, 0, game.width, game.height);            bg2.alpha = 1;            bg2.endFill();            return game.add.tween(bg2).to({ alpha: 0 }, this.time, Phaser.Easing.Linear.None);        }, this);    tween.start();};

And then you can simply call it with

Fade.fadeOut('Nameofthestate');

Hope i could help!!

 

P.S. I would like to make something more elaborate that would allow you to change colors but, i can't seem to find a way to change colors without having to use the debug

[valueerror 144]

@rich:  what do you mean? 

 

if you mean i should submit it to the repo..  i'm unsure how do that...

 

 otherwise...  you can use everything here for the examples repo.. that's the whole purpose of it..  i'm doing these examples anyway for my pupils and i thought that maybe they are useful to others too...

[adamyall 21]

@rich:  what do you mean? 

 

if you mean i should submit it to the repo..  i'm unsure how do that...

 

 otherwise...  you can use everything here for the examples repo.. that's the whole purpose of it..  i'm doing these examples anyway for my pupils and i thought that maybe they are useful to others too...

You'll need to read up on how git works, and make an account on GitHub.

Then you can fork the Examples repository: https://github.com/photonstorm/phaser-examples, add your new examples, and make a pull request for your examples to be re-integrated into the master branch of the repository.

[valueerror 144]

huh...  i'll see if i find time doing that..  until then.. here is another one.. it's the successor of the rope example.. it's much better IMHO.. it's a CHAIN

 

 

http://test.xapient.net/phaser/ALL/chain.html

 

i just changed some little things.. now i use RevoluteConstraint  

 

 

 

( btw.  here is it in action: hang and swing with it ^^  http://test.xapient.net/phaser/ALL/  )

[presidenten 2]

I made an example on how to pause and unpause the game with a pause button without using the DOM. I also threw in how to make a pause menu.

 

Code here: https://github.com/presidenten/phaser-examples/blob/7c0befd068b99bc653a492c61519a46ce532a188/examples/misc/pause%20menu.js

 

 

 

I have not added anything to the paused state though, as I thought of this first and foremost as an example on how to pause the game from ingame.

I made a pull request on the examples repo for easy adding if it looks useful :-)

[pandavigoureux29 18]

Hi, I wasn't sure where to put it so I'm trying my luck here 

 

In order to use grunt on Windows 7, you need to run the command 

 

npm install -g grunt-cli

 

Without that, the "grunt" command isn't recognized ( for me at least ). I think this should help some people

[onebeartoe 0]

Is the monthly contest is still on?

I made a game when I first found Phaser:

 

      http://www.onebeartoe.net/games/blinko/

 

It uses an emitter and a bunch of binding.

 

 

[Renatex 0]

Just launched a Phaser game

X-lab!
Learn how to mix primary colours and have fun!

http://xlab.r2goo.com/