rich

The Monthly Phaser Examples Contest

Recommended Posts

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! :)

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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  :rolleyes:

 

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!)  

post-6912-0-44944400-1393837021.jpg

Share this post


Link to post
Share on other sites

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
 

 

screenshot:

post-6912-0-72310600-1395919057.jpg

Share this post


Link to post
Share on other sites

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

post-6912-0-44735400-1396557155.jpg

Share this post


Link to post
Share on other sites

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!! :D

 

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

Share this post


Link to post
Share on other sites

@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...

Share this post


Link to post
Share on other sites

@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.

Share this post


Link to post
Share on other sites

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/  )

post-6912-0-31678200-1397227297.jpg

Share this post


Link to post
Share on other sites

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

 

 

Cekkb0g.jpg

 

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 :-)

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.