MDM Theme created
with Phaser Framework and Phaser Editor
I decided to try
something completely different and wanted to for awhile now.
I decided to switch
from java and opengl for android and try html5 instead.
After much research
I decided to use phaser html5 framework.
I then wanted a IDE
to code it in, after trying a few (XDK, Sublime and a few others) I
decided to give the phaser editor editor a go and decided to use it
over all the rest.
Main reason, I am
used to eclipse and from working with libgdx it was similar for me.
Plus it has a nice
texture packer and assets loader built in which saves a ton of time
and it creates the json files to go with it which is easily called
for in the code.
Enough of the
reasons why, I always wanted to try a gaming framework as the
background for mdm themes and decided to give a go.
There was always an
issue with canvas and mdm so I sceptical so I threw a 5 minute sample
together threw it into the login screen, logged out and crossed my
fingers and hoped for the best.
Well to my surprise
it worked great, the canvas loaded and ran perfect.
So why use a gaming
framing for mdm?
Well it gives you
tons more options to create really nice animated login screens, not
just basic css animations but all out full blown animations.
Box2d, P2 physics,
particles, tweens, animations etc etc etc.
Pretty much anything
that can be done in a normal game animation can be done.
So I decided to come
up with a quick tutorial to anyone started making them with phaser
framework and the phaser editor.
To you started first
get the editor here: http://phasereditor.boniatillo.com/blog/
It is free with a
nag screen but fully functional, if you use it for your work please
donate as it is well worth it.
Drop it into your
home directly (it is a standalone version no install necessary), and
open it up.
You can start a new
project by following the tutorial on the phaser editor site
Use basic.
Now what I did was
just use one file for the whole sample I presented here since it was
a one page animation but you can make it as detailed as you wish.
I just used the
Main.js file to create the whole animation.
All the files I use in this sample plus the base mdm theme files can be downloaded here
http://samriggs.deviantart.com/art/MDM-Theme-created-with-Phaser-Framework-and-Phaser-600449516
All the files I use in this sample plus the base mdm theme files can be downloaded here
http://samriggs.deviantart.com/art/MDM-Theme-created-with-Phaser-Framework-and-Phaser-600449516
First I deleted all
the sample stuff (images, other javascript files in the js folder) I
kept only the Main.js and assets-pack.json which I changed later to
load my atlas and background image.
If you walk through
these two tutorials it will teach you how to add images to the
texture packer here
and the assets load
tutorial here
I don't see any need
in rewriting these tutorials here as it is done great on the website
tutorial.
The object of the
quick tutorial is only to show you how to bring in the created
animation into mdm itself.
Here is the main.js
code I wrote for this sample.
window.onload = function() {// Create your Phaser game and inject it into an auto-created canvas.// We did it in a window.onload event, but you can do it anywhere (requireJS// load, anonymous function, jQuery dom ready, - whatever floats your boat)//var game = new Phaser.Game(1920, 1080, Phaser.CANVAS, '');var game = new Phaser.Game(1920, 1080, Phaser.CANVAS, '', { init: init, preload: preload, create: create, update: update, render: render });function init() {game.input.maxPointers = 1;// Setup the scale strategygame.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;//you can try resiz to see which one fits best show_all scales nicely//but might show letterbox//this.scale.scaleMode = Phaser.ScaleManager.RESIZE;game.scale.pageAlignHorizontally = true;game.scale.pageAlignVertically = true;}function preload() {game.load.pack("level", "assets/assets-pack.json");}var meteor1;var meteor2;var meteor3;var meteor4;var meteor5;var movex = 0;var movey = 300;function create() {this.add.image(0,0,"background");this.add.image(1060,120,"myatlas","planet");meteor1 = this.add.sprite(movex,movey,"myatlas","rock7");game.physics.enable(meteor1, Phaser.Physics.ARCADE);meteor2 = this.add.sprite(movex - 100,movey + 300,"myatlas","rock8");game.physics.enable(meteor2, Phaser.Physics.ARCADE);meteor3 = this.add.sprite(movex + 100,movey + 200,"myatlas","rock9");game.physics.enable(meteor3, Phaser.Physics.ARCADE);meteor4 = this.add.sprite(movex + 400,movey + 150,"myatlas","rock5");game.physics.enable(meteor4, Phaser.Physics.ARCADE);meteor5 = this.add.sprite(movex + 700,movey + 100,"myatlas","rock6");game.physics.enable(meteor5, Phaser.Physics.ARCADE);}function update() {meteor1.angle += .1;meteor1.body.velocity.x=100;if(meteor1.x > 2500){meteor1.x = -150;}meteor2.angle += .2;meteor2.body.velocity.x=120;if(meteor2.x > 2500){meteor2.x = -200;}meteor3.angle += .3;meteor3.body.velocity.x=140;if(meteor3.x > 2800){meteor3.x = -250;}meteor4.angle += .4;meteor4.body.velocity.x=180;if(meteor4.x > 2700){meteor4.x = -200;}meteor5.angle += .6;meteor5.body.velocity.x=170;if(meteor5.x > 2900){meteor5.x = -220;}}function render() {//you can add debug stuff here for testing// game.debug.spriteInfo(s, 20, 32);}};
I decided to use the
screen size of 1920x1080 for my image size, you can make it whatever
you want.
Phaser has a nice
scale manager with quite a few options, I was going to use RESIZE but
after testing I opted for SHOW_ALL
This resizes or
sizes the screen once loaded in the window.
game.scale.scaleMode
= Phaser.ScaleManager.SHOW_ALL;
You can check out
the scale manager for phaser here
The preloader:
function preload() {
game.load.pack("level",
"assets/assets-pack.json");
}
This will load all
the images in the assets loader json file that the editor created
(all the texture packer json is in this also so it's all in one neat
file and can be loaded from this one file.
Here is an image of
the texture packer:
Here is an image of
the assets loader
Alright then, once
you made your creation and are satisfied with it, it is time to bring
it on over the your mdm template folder.
Go into your
directory where you saved the game files you created and then into
the WebContent folder.
Choose all files in
this folder except the index.html file, leave that one out.
Copy paste them into
your mdm theme folder like below.
Now that your creation is in the folder we need to add the javascript into the head tags of the main index.html file in the mdm folder that runs the mdm files.
Go into your phaser creation in the webcontent folder again where you just copied all those files over from and open up the index.html file and copy the javascript links and paste them into the mdm index.html like below
now that that is done save your mdm index.html file and close it.
Next change the name in the theme.info file to what you named it (it should be the same name as the folder that holds all these files) like the image below.
Save it and close it.
Now it's time to test out your creation and hopefully it works.
Load the mdm emulator, in linux mint you type in
mdm-theme-emulator
into your terminal as in the image below
This loads the emulator click on open and find your mdm index.html file and open it, this will load your newly created mdm/phaser theme so you can check it out like below.
volia it works, you can test it here before going live.
While your at it take a screenshot of this because you need it for your screenshot file in the mdm folder.
Bring in that screenshot into gimp or your program of choice.
Crop around the emulator and open the screenshot.jpg file into gimp also under a new file. Paste this huge image over and select the layer in gimp and under layer resize it to fit the screenshot size so it ffits the same size as below
Some cropping might occur and overwrite the file so it saves your new screenshot and close the mighty gimp.
Now you are ready to go live.
Select the folder that holds your mdm creation, right click --> compress
compress it as a tar.gz as in the image below
Now that you have that done you can go live if you like, go to settings the click on the login window as in the image below
It will ask you for your password, once it opens just drag your tar.gz into the window and install it as in the image below
Select it and next time you log in your ready to see your new mdm login screen.
I included the base mdm file you'll need in the download along with my sample.
Just add your own phaser creation and replace the files I added and your ready to roll.
If you want to learn more about phaser and learn how to make some cool effects and animations they have a ton of examples and you can also download the master file that has tons of examples in it for you to play with.
The site has tons of tutorials to teach you all you'll need to know.
You can check out the examples here
Here is a short video of it in action in the emulator
Happy coding.
Sam
Edit: thanks to MegMut over at the phaser forums http://www.html5gamedevs.com/topic/21659-phaser-tutorial-for-linux-mdm/
I am adding the random code MegMut added if you wanted to use this mdm yourself or just to use the random part on your own.
Here it is from MegMut:
"I took a good look at your code, and I think I've been able to tweak the
performance. There isn't any need to enable the physics engine, as all
you're doing is moving the sprites body, also, I went and made it a
little bit more dynamic. I hope you don't mind 
Here's the code 
Here's the code
create() {
// create the meteor group
this.meteorGroup = this.game.add.group;
this.rocks = [5, 6, 7, 8, 9];
this.numOfMeteors = 5
for (var i = 0, i <= this.numOfMeteors; i++) {
// generate random x value between -150 and the games width
var x = this.game.rnd.integerInRange(-150, this.game.width);
var y = this.game.rnd.integerInRange(0, this.game.height);
// pick a random rock from the rocks array
var rock = this.rocks[Math.floor(Math.random()*this.rocks.length)];
// create the sprite
var meteor = this.game.add.sprite(x, y, "myatlas","rock8")
// pick a random speed for the meteor to travel at
meteor.speed = this.game.rnd.integerInRange(200, 250);
// pick a rancom spin for the meteor
meteor.spin = this.game.rnd.integerInRange(-3, 4);
this.meteorGroup.add(meteor);
}
}
update() {
for (var i = 0; i < this.meteorGroup.children.length; i++) {
this.meteorGroup.children[i].x += this.meteorGroup.children[i].speed;
this.meteorGrou.children[i].angle += this.meteorGroup.children[i].spin;
// use world wrap to allow the sprites to go off on side, and continue back on the other
this.game.world.wrap(this.meteorGroup.children[i], this.meteorGroup.children[i].width, false, true, true);
// alternativly, set start and x positions for the sprites individually and perform a check on every update loop
}
}
it will allow you to create as many meteors as you want by changing one
variable. It also randomsies a lot of the positional data, meaning every
time you go the login screen, it will never look the same. The only
thing I've not tried before, is the world.wrap function. I checked the
docs and that should work fine, but if it's an issue, you can just do
what the button commend of the update loop says"
Thanks MegMut :)
