Friday, 1 April 2016

MDM Theme created with Phaser Framework and Phaser Editor


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

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 strategy
game.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


video

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



Monday, 28 March 2016

HTML5 Games on the way

Well time for a change. I decided to try my hand at html5 games and apps. Why the change? well I been debating lately whether or not to try making games in html5 since that is the way things seem to flowing these days. It is quicker and easier to code, although going from java down to javascript is a tiny learning curve on what will not work and what will work. Limit on artwork on android limits what can be done with java where as html5 there really is no limit except slowing things down with to much going on at the same time but it is not limited to 1.6 MB at a time or close to that. I can make it any size I want if web based and make it fullscreen or a certain size with the option to go full screen. Keeping users positions and stats in a database hosted on a site opens more doors. Sockets for multiplayer games for web based games. If so desired it can also be ported to phones and tablets as well The list can go and on and I know there can be a debate about it, which I do not wish to go into. Anyhow this is what I'll be working on for awhile and maybe permanently if all goes as expected. Will I still be making android apps? Yup probably so, this just allows me to branch out in areas I always wanted to go.
 After much research and studying I decided to use phaser (soon to be laser) framework. It just works for me so far.
You can check it out here
I tried a few IDE's including sublime and XDK but decided to choose phaser editor as main IDE for html5 games.
Main reasons It just works, it has eclipse as it's base and it is well put together to work with phaser and work much like libgdx does in some aspects so I'm comfortable with that fact.
You can check out the editor here
Also it is LINUX friendly :) here is an image of the phaser editor

 

 It should be a fun journey I'll keep you updated as games progress.

Just to give a quick taste of the first html5 game I am working here is a screenshot.


I won't say what this game is going to be until finished but it is one of my wifes favorite style of game.
The artwork will probably take me longer then the coding but I'll add a post once finished and where to play it, this is just the first level screen (not complete obviously) So there is a longggg way to go yet.
For those curious what programs I work in for to create the art it is my two favorite, gimp and krita, krita for the more painting (blue section) gimp for the layouts and less painting areas (framing, vines etc).
I have to re-teach  myself php and mysql for backend stuff before putting it up (I haven't worked in either since my flash/php tech review days in the early 2000's) but it shouldn't take me to long to refresh my old brain and catch up on new stuff that came down the pipeline since php4.

Also I want to try and use phaser and the phaser editor to create some animated mdm themes for linux, not sure if it will work but hopefully it will, I had some issues in the past using canvas with mdm but maybe this will work.
I'll keep you updated on that experiment because if this works there is a great potential to make some amazing login screens for linux and maybe some animated screensavers as well for linux.
Sam

Tuesday, 12 January 2016

Clock live wallpapers

Well since I like making clocks so much I decided to come up with  series of 5 clocks in one for a live wallpaper.
This is 5 live wallpapers in 1.
You can hide or show a lot of areas to make it your own plus I added the moon phase and the day of month into also.
I also made a free version of the tech one so everyone can check it out before they buy the pro one with all 5 in it.
The free one is also fully functional. here are some screen shots.

tech


vintage

space

steampunk

laboratory


you can get the pro version by clicking the link below


Available on Google Play 

 The free version you can get by clicking the link below


Available on Google Play 

Sunday, 14 June 2015

Steampunk Faces Live Wallpaper

I just finished a series of 3 steampunk faces.
 All three have touch events that have three different choices (stars, gears and smoke) You also have the ability to show almost every part of the live wallpaper, so if you only want all of it except the face itself you can do that, and the rule applies to the other parts as well All three come with 3 viewports, for each portrait and landscape modes because what fits on one orientation does not always fit the same on the opposite one, which I found with my own tablet, thus you have the choices for each one to get the best fit.

here is the video





screenshot





you can download it here

Available on Google Play 



If you have any issues or questions feel free to email me or leave a message here.
All three were created using libgdx framework, my personal favourite and probably all my future android apps will be created using it and I highly encourage anyone wanting to create android games or live wallpapers to try it out, it also does cross platform for html5 (which I'll be using probably for future games as well as android, it also makes jave applications and apple iphone/pad as well plus it has a ton of extras toys you can use as well to make your job easier (had to plug it since I like it so much).
Anyhow hopefully I can make a new steampunk city to replace the old outdated one I have up now, it's just about time to take it down and I am just coming up with ideas to make a new and better one that will work better for newer tablets and phones.
I am also working on a new game which should take me some time since it has a lot of artwork and coding to go into it and I am a one man team for now and have plans for a series of games in which I am going to resurrect an old cartoon character I made in the 80's and never really used it,
These I will keep under wraps until they are close to being released.
I should be able to do some more live wallpapers to replace all the old ones in between though........... hopefully.
Sam



Tuesday, 14 April 2015

Steampunk Motherboard Live Wallpaper

Well I decided to make some new live wallpapers since the old ones were outdated and only ran on java, I am taking the old ones down and have removed most of them already, I am making new ones that use opengl so it isn't so hard on the battery use as it uses the gpu.
I also switched over to use libgdx also now as it is my favourite framework to use for my upcoming projects and used the framework from the book by Mario ("Beginning Android Games") for most of my past work.
So here is the first live wallpaper, as usual I begin things with a steampunk version, this one will replace all the gears live wallpapers I made in the past.
Here is some screen shots:







Here is a video of it in action


Sorry about the video quality I am not the best cameraman.

As you can see I also took advantage of the particle editor for touch effects which can be turned off if you don't want any.
I also gave the option to choose from 3 viewports for each portrait and landscape modes, I found with my tablet what fit in landscape mode did not fit as well in portrait mode so I gave the user to choose what fits best for them in each mode.
The clocks really work also (in case you were wondering)
I have plans for more and I will post them as I make them and upload them to google play.
You can get the paid version by clicking the link below


Available on Google Play 


I also made a free version which only has the viewport options and the gas mask in the center for you to check out and see if it works good on your device and if you like it.
You can get the free version by clicking the link below

Available on Google Play

 

Monday, 5 January 2015

Cool Cat Toys

I decided to make a game for cats, cats love apps too :)
In this one I decided to add animations to the main menu, so the cat can swat at the dragonfly buzzing by and hit the play button, then on the levels page all the buttons animate so hopefully the cat will swat one (choosing the level he/she wants to play, then play the game itself).
It's super easy to navigate and play, I actually slowed things down so the cat can swat them and added bigger bounds for the hit areas making it easier for the cats.
They get points every time they hit an object, if they beat their last highscore you'll see cool cat appear below the score (found when you press the pause button)

Here is some screen shots












Yup I even added a wack-a-mole game for cats, thought they might like it.

You can grab it here:


Available on Google Play

Monday, 1 December 2014

Steampunk Brick Breaker

Well I finally got finished the brick breaker game and of course made it steampunk style, just can't get away from steampunk

Here is a video of it



and some screenshots















Here is the description

For those who love Steam punk and breakout games.
Three game modes: Campaign, Just Play, Random

Campaign: 240 levels with 3 modes of difficulty to beat
Just Play: 3 difficulty modes (easy, medium, hard) This mode picks random campaign levels to play
Random: 3 difficulty modes (easy, medium, hard) This is totally random, you'll never know what you'll get in this game mode.
This gives you unlimited game play.

The ability to erase campaign levels and start all over again.
Choose an avatar for the high scores

Three board designs, representing the three difficulty modes

Simple Controls:
Drag the paddle from side to side and hit the balls and gears that drop
Make sure you do not let the balls fall below the paddle
If all balls fall below the paddle it is game over
Your final score is multiplied by how many balls you have left, so the more balls you keep bouncing the higher your score will be in the end

There are 3 different balls
There are 5 different color gears, each one does something different
Two animated blocks shoot out lightning or shoot out random plasma balls that destroy bricks

The drag does not work on the android note.


Available on Google Play