tag:blogger.com,1999:blog-85682355138534074062023-06-20T06:42:02.674-07:00Sams Stuffsams stuff software an update blog and support for all the live wallpapers and aps I'll be making for the android marketsamsstuffhttp://www.blogger.com/profile/00310819706570736681noreply@blogger.comBlogger8125tag:blogger.com,1999:blog-8568235513853407406.post-17080937931602435852016-10-01T14:10:00.000-07:002016-10-01T14:10:29.476-07:00Make a Mario-Style Platformer with the Phaser EditorI been busy plugging away at making some html5 games using the incredible phaser framework as I wrote before about and the incredible Phaser Editor<br />
<br />
One thing I love that they just added to the phaser editor is the scene creator which makes life so much easier to create a whole scene with drag and drop and resize abilitlies.<br />
<br />
Anyone who has created games before know how much of a headache all the measuring can be, where to place objects (me I use gimp for most of my measuring a scene with, then write down all the x and y placements into text file editor the paste them over or keep the editor and gimp open at the same time in different workspaces (I use linux of course)<br />
This can be a headache and time consuming.<br />
<br />
Well Arian (the developer for the Phaser editor) added a scene maker which gets rid of this headache, just drop the sprites into the scene and change them resize them etc it does it all right inside the editor now.<br />
An extremely useful add on<br />
<br />
Here is an image of the scene maker<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-1CWC2uWzC44/V_AlJdSIOgI/AAAAAAAAA84/bU0oHVaFo0Ay5tryslWdE6TgdhG13jf7ACLcB/s1600/banner.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="198" src="https://1.bp.blogspot.com/-1CWC2uWzC44/V_AlJdSIOgI/AAAAAAAAA84/bU0oHVaFo0Ay5tryslWdE6TgdhG13jf7ACLcB/s320/banner.png" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
He wrote an excellent tutorial on how to use this which you can check out here:<br />
<br /><a href="https://gamedevacademy.org/make-a-mario-style-platformer-with-the-phaser-editor/">https://gamedevacademy.org/make-a-mario-style-platformer-with-the-phaser-editor/</a><br />
<br />
If you want to try out the editor you can download it here:<br />
<br />
<a href="http://phasereditor.boniatillo.com/" target="_blank">http://phasereditor.boniatillo.com/ </a><br />
<br />
You want to make html5 games then this will make your life a whole lot easier, I been using it for quite a while now and it has saved me hours of coding and texture atlas which is also built in, a totally complete built in game maker.<br />
<br />
I highly recommend this to anyone thinking of getting into creating html5 games or anyone who is making them now.<br />
<br />
Back to creating my games :)<br />
Sam<br />
Anonymousnoreply@blogger.com2tag:blogger.com,1999:blog-8568235513853407406.post-20272739546302866312016-06-02T22:01:00.000-07:002016-06-02T22:01:01.908-07:00Brokeh MDM theme created with phaser editorI just finished a new mdm theme<br />I decided to go real boring this time around and make a simple and clean brokeh animated theme for those who like brokeh<br />Not me but I know a lot do so it's for you :wink: <br /><br />You can check it out here: <a href="http://samriggs.deviantart.com/art/Brokeh-MDM-theme-for-linux-made-with-phaser-editor-612911644">http://samriggs.deviantart.com/art/Brokeh-MDM-theme-for-linux-made-with-phaser-editor-612911644</a><br />Here is a image of it<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-pk5Bq56ikEU/V1EOWp2YX1I/AAAAAAAAA8c/rq9mYI1LPo0xFTyCWfoYaH83Kf10FISmgCLcB/s1600/newscreenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://2.bp.blogspot.com/-pk5Bq56ikEU/V1EOWp2YX1I/AAAAAAAAA8c/rq9mYI1LPo0xFTyCWfoYaH83Kf10FISmgCLcB/s320/newscreenshot.png" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
If you want to see it in action here it is<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe width="320" height="266" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/S8-Z18elm5g/0.jpg" src="https://www.youtube.com/embed/S8-Z18elm5g?feature=player_embedded" frameborder="0" allowfullscreen></iframe></div>
<br />
<br />
<br />
<br />
<br />and ya can gather the tar install files or all the files to check out or to fork at github<br />
<br /><a href="https://github.com/samsstuff/Bokeh-MDM-Theme">https://github.com/samsstuff/Bokeh-MDM-Theme</a><br /><br />I am putting all the new themes on github from now because it is just easier for me and you<br /><br />Enjoy<br />Sam<br />
Anonymousnoreply@blogger.com0tag:blogger.com,1999:blog-8568235513853407406.post-18723933657085094592016-05-07T13:19:00.001-07:002016-05-10T16:35:56.812-07:00Area51 MDM theme made with phaser editorWell I finally got some time together to make my login theme and try some other stuff with the phaser editor.<br />
<br />
I always wanted to make my computer into a whole area 51 theme from login screen on through to everything else including the icons.<br />
I'll get to the rest later but I got the mdm theme completed.<br />
This should show you some more what you can do using the phaser framework for mdm themes and again I'll give you the link to get the editor which has everything built in and is linux friendly.<br />
http://phasereditor.boniatillo.com/<br />
For those who want to make their own or want to get into html5 gaming, it's a great editor.<br />
<br />
Here is the screenshot of it.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-BZ3YUJYz7N4/Vy5NCFGZBUI/AAAAAAAAA8M/8-97pg7qjuADQhJHeP91c5G2o7KAsdv2ACLcB/s1600/area51screenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="179" src="https://4.bp.blogspot.com/-BZ3YUJYz7N4/Vy5NCFGZBUI/AAAAAAAAA8M/8-97pg7qjuADQhJHeP91c5G2o7KAsdv2ACLcB/s320/area51screenshot.png" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
It has a gnu and tux in tubes floating around with bubbles to represent gnu/linux<br />
<br />
You can download it here: <a href="http://samriggs.deviantart.com/art/Area51-MDM-Theme-create-with-phaser-editor-607619934">http://samriggs.deviantart.com/art/Area51-MDM-Theme-create-with-phaser-editor-607619934</a><br />
<br />
I also put the tar.gz install file plus all the files on github now which might be easier for you.<br />
<div wrap="">
<a class="moz-txt-link-freetext" href="https://github.com/samsstuff/Area51-MDM">https://github.com/samsstuff/Area51-MDM</a></div>
<br />
<br />
Here is a video of it in action<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen="" class="YOUTUBE-iframe-video" data-thumbnail-src="https://i.ytimg.com/vi/jcCJkksqFh4/0.jpg" frameborder="0" height="266" src="https://www.youtube.com/embed/jcCJkksqFh4?feature=player_embedded" width="320"></iframe></div>
<br />
<br />
Hope you enjoy it.<br />
<br />
SamAnonymousnoreply@blogger.com0tag:blogger.com,1999:blog-8568235513853407406.post-69030826718474061082016-04-01T19:28:00.000-07:002016-04-24T20:16:26.222-07:00MDM Theme created with Phaser Framework and Phaser Editor<style type="text/css">p { margin-bottom: 0.25cm; line-height: 120%; }a:link { }</style>
<br />
<div style="line-height: 100%; margin-bottom: 0cm;">
MDM Theme created
with Phaser Framework and Phaser Editor</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
I decided to try
something completely different and wanted to for awhile now.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
I decided to switch
from java and opengl for android and try html5 instead.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
After much research
I decided to use phaser html5 framework.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
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.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Main reason, I am
used to eclipse and from working with libgdx it was similar for me.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
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.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
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.
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
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.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Well to my surprise
it worked great, the canvas loaded and ran perfect.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
So why use a gaming
framing for mdm?</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
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.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Box2d, P2 physics,
particles, tweens, animations etc etc etc.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Pretty much anything
that can be done in a normal game animation can be done.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
So I decided to come
up with a quick tutorial to anyone started making them with phaser
framework and the phaser editor.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
To you started first
get the editor here: <a href="http://phasereditor.boniatillo.com/blog/">http://phasereditor.boniatillo.com/blog/</a></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
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.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Drop it into your
home directly (it is a standalone version no install necessary), and
open it up.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
You can start a new
project by following the tutorial on the phaser editor site
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<a href="http://phasereditor.boniatillo.com/blog/quick-start/010-first-steps">http://phasereditor.boniatillo.com/blog/quick-start/010-first-steps</a></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Use basic.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
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.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
I just used the
Main.js file to create the whole animation.<br />
<br />
All the files I use in this sample plus the base mdm theme files can be downloaded here<br />
<a href="http://samriggs.deviantart.com/art/MDM-Theme-created-with-Phaser-Framework-and-Phaser-600449516" target="_blank">http://samriggs.deviantart.com/art/MDM-Theme-created-with-Phaser-Framework-and-Phaser-600449516 </a></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
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.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
If you walk through
these two tutorials it will teach you how to add images to the
texture packer here</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<a href="http://phasereditor.boniatillo.com/blog/quick-start/050-texture-atlas">http://phasereditor.boniatillo.com/blog/quick-start/050-texture-atlas</a></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
and the assets load
tutorial here</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<a href="http://phasereditor.boniatillo.com/blog/quick-start/020-asset-pack">http://phasereditor.boniatillo.com/blog/quick-start/020-asset-pack</a></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
I don't see any need
in rewriting these tutorials here as it is done great on the website
tutorial.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
The object of the
quick tutorial is only to show you how to bring in the created
animation into mdm itself.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Here is the main.js
code I wrote for this sample.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<blockquote class="tr_bq">
<div style="line-height: 100%; margin-bottom: 0cm;">
<br />
<div style="line-height: 100%; margin-bottom: 0cm;">
window.onload =
function() {</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
// Create your
Phaser game and inject it into an auto-created canvas.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
// We did it in a
window.onload event, but you can do it anywhere (requireJS</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
// load, anonymous
function, jQuery dom ready, - whatever floats your boat)</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
//var game = new
Phaser.Game(1920, 1080, Phaser.CANVAS, '');</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
var game = new
Phaser.Game(1920, 1080, Phaser.CANVAS, '', { init: init, preload:
preload, create: create, update: update, render: render });</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
function init() {</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
game.input.maxPointers
= 1;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
// Setup the scale
strategy</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
game.scale.scaleMode
= Phaser.ScaleManager.SHOW_ALL;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
//you can try
resiz to see which one fits best show_all scales nicely
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
//but might show
letterbox</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
//this.scale.scaleMode
= Phaser.ScaleManager.RESIZE;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
game.scale.pageAlignHorizontally
= true;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
game.scale.pageAlignVertically
= true;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
}</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
function preload()
{</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
game.load.pack("level",
"assets/assets-pack.json");</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
}</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
var meteor1;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
var meteor2;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
var meteor3;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
var meteor4;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
var meteor5;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
var movex = 0;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
var movey = 300;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
function create() {</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
this.add.image(0,0,"background");</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
this.add.image(1060,120,"myatlas","planet");</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor1 =
this.add.sprite(movex,movey,"myatlas","rock7");</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
game.physics.enable(meteor1,
Phaser.Physics.ARCADE);</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor2 =
this.add.sprite(movex - 100,movey + 300,"myatlas","rock8");</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
game.physics.enable(meteor2,
Phaser.Physics.ARCADE);</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor3 =
this.add.sprite(movex + 100,movey + 200,"myatlas","rock9");</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
game.physics.enable(meteor3,
Phaser.Physics.ARCADE);</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor4 =
this.add.sprite(movex + 400,movey + 150,"myatlas","rock5");</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
game.physics.enable(meteor4,
Phaser.Physics.ARCADE);</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor5 =
this.add.sprite(movex + 700,movey + 100,"myatlas","rock6");</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
game.physics.enable(meteor5,
Phaser.Physics.ARCADE);</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
}</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
function update() {</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor1.angle +=
.1;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor1.body.velocity.x=100;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
if(meteor1.x >
2500){</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor1.x = -150;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
}</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor2.angle +=
.2;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor2.body.velocity.x=120;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
if(meteor2.x >
2500){</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor2.x = -200;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
}</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor3.angle +=
.3;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor3.body.velocity.x=140;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
if(meteor3.x >
2800){</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor3.x = -250;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
}</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor4.angle +=
.4;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor4.body.velocity.x=180;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
if(meteor4.x >
2700){</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor4.x = -200;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
}</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor5.angle +=
.6;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor5.body.velocity.x=170;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
if(meteor5.x >
2900){</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
meteor5.x = -220;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
}</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
}</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
function render() {</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
//you can add
debug stuff here for testing</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
//
game.debug.spriteInfo(s, 20, 32);</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
}</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
};</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
</div>
</blockquote>
<div style="line-height: 100%; margin-bottom: 0cm;">
I decided to use the
screen size of 1920x1080 for my image size, you can make it whatever
you want.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
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</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
This resizes or
sizes the screen once loaded in the window.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
game.scale.scaleMode
= Phaser.ScaleManager.SHOW_ALL;</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
You can check out
the scale manager for phaser here</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<a href="http://phaser.io/docs/2.4.4/Phaser.ScaleManager.html">http://phaser.io/docs/2.4.4/Phaser.ScaleManager.html</a></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
The preloader:</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
function preload() {</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
game.load.pack("level",
"assets/assets-pack.json");</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
}</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
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.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Here is an image of
the texture packer:</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-lWXq5PfQUAg/Vv8rBTGYpmI/AAAAAAAAA64/azoG3-nNCjkaXwOlUUpSDQ8P2p2-b-XQA/s1600/atlas.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://2.bp.blogspot.com/-lWXq5PfQUAg/Vv8rBTGYpmI/AAAAAAAAA64/azoG3-nNCjkaXwOlUUpSDQ8P2p2-b-XQA/s320/atlas.png" width="320" /></a></div>
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Here is an image of
the assets loader</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-4h0cMISB_4M/Vv8rA4nohvI/AAAAAAAAA6w/0KV85mbRAN4WjYoweQ9BSu7sOddRNV2FQ/s1600/asssets.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://3.bp.blogspot.com/-4h0cMISB_4M/Vv8rA4nohvI/AAAAAAAAA6w/0KV85mbRAN4WjYoweQ9BSu7sOddRNV2FQ/s320/asssets.png" width="320" /></a></div>
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
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.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Go into your
directory where you saved the game files you created and then into
the WebContent folder.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Choose all files in
this folder except the index.html file, leave that one out.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
Copy paste them into
your mdm theme folder like below.</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-HMHFibr8H7M/Vv8rBVHPl5I/AAAAAAAAA68/2akSJA6culUlN13aUQ-4rJfHOV-sNvI1w/s1600/copyitover.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://3.bp.blogspot.com/-HMHFibr8H7M/Vv8rBVHPl5I/AAAAAAAAA68/2akSJA6culUlN13aUQ-4rJfHOV-sNvI1w/s320/copyitover.png" width="320" /></a></div>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br />
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.<br />
<br />
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<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-wFG6J8qaVUw/Vv8rEWdBxxI/AAAAAAAAA7o/6Mw5pOyXLPINkmn7roLNor6AmZR1B9o1Q/s1600/theindex.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://4.bp.blogspot.com/-wFG6J8qaVUw/Vv8rEWdBxxI/AAAAAAAAA7o/6Mw5pOyXLPINkmn7roLNor6AmZR1B9o1Q/s320/theindex.png" width="320" /> </a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-qfxCn2EhlaE/Vv8rA2tQJzI/AAAAAAAAA7s/xrQD18h3dWctD4K8bh7uys_7H8pdpCkXQ/s1600/addscript.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://3.bp.blogspot.com/-qfxCn2EhlaE/Vv8rA2tQJzI/AAAAAAAAA7s/xrQD18h3dWctD4K8bh7uys_7H8pdpCkXQ/s320/addscript.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<div class="separator" style="clear: both; text-align: center;">
now that that is done save your mdm index.html file and close it. </div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
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.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://1.bp.blogspot.com/-iP7MFPFXChU/Vv8rCUoRBvI/AAAAAAAAA7s/lzF2_YnSQZAYKk3piWygRVlv3Z6-NaSBQ/s1600/nametheme.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://1.bp.blogspot.com/-iP7MFPFXChU/Vv8rCUoRBvI/AAAAAAAAA7s/lzF2_YnSQZAYKk3piWygRVlv3Z6-NaSBQ/s320/nametheme.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Save it and close it.</div>
<div class="separator" style="clear: both; text-align: left;">
Now it's time to test out your creation and hopefully it works.</div>
<div class="separator" style="clear: both; text-align: left;">
Load the mdm emulator, in linux mint you type in </div>
<div class="separator" style="clear: both; text-align: left;">
mdm-theme-emulator</div>
<div class="separator" style="clear: both; text-align: left;">
into your terminal as in the image below</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-TaT7bt4SDto/Vv8rC-8gdGI/AAAAAAAAA7s/D-8x_b2dvtw2qBAhQEKYiXY8qAZauS-Dw/s1600/runemulator.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://3.bp.blogspot.com/-TaT7bt4SDto/Vv8rC-8gdGI/AAAAAAAAA7s/D-8x_b2dvtw2qBAhQEKYiXY8qAZauS-Dw/s320/runemulator.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: center;">
</div>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
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.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-OtQAldOJi8w/Vv8wb5j78EI/AAAAAAAAA78/484Trifaw-o2xrr1ggXYDXxKNnJf9nNXQ/s1600/emulator.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://3.bp.blogspot.com/-OtQAldOJi8w/Vv8wb5j78EI/AAAAAAAAA78/484Trifaw-o2xrr1ggXYDXxKNnJf9nNXQ/s320/emulator.png" width="320" /></a></div>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
volia it works, you can test it here before going live. </div>
<div class="separator" style="clear: both; text-align: left;">
While your at it take a screenshot of this because you need it for your screenshot file in the mdm folder.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Bring in that screenshot into gimp or your program of choice.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-U-uRvUWnAdA/Vv8rC8OEDOI/AAAAAAAAA70/RSIpzXS3MdUZd9rqjis9_RWNxEFCxeWtQ/s1600/screenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://3.bp.blogspot.com/-U-uRvUWnAdA/Vv8rC8OEDOI/AAAAAAAAA70/RSIpzXS3MdUZd9rqjis9_RWNxEFCxeWtQ/s320/screenshot.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
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</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-jsVT1fiAqrg/Vv8rB0kbQgI/AAAAAAAAA7s/ggE-CFi-zLI0IDrigGkLEP5RnM4w2c3eg/s1600/finalscreenshot.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://3.bp.blogspot.com/-jsVT1fiAqrg/Vv8rB0kbQgI/AAAAAAAAA7s/ggE-CFi-zLI0IDrigGkLEP5RnM4w2c3eg/s320/finalscreenshot.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Some cropping might occur and overwrite the file so it saves your new screenshot and close the mighty gimp.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Now you are ready to go live.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Select the folder that holds your mdm creation, right click --> compress</div>
<div class="separator" style="clear: both; text-align: left;">
compress it as a tar.gz as in the image below</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-mow4m_2pdxs/Vv8rEboII9I/AAAAAAAAA70/AR4X6Ls8ZhsG60fsIzCGngWiTr5-arPaw/s1600/taritup.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://4.bp.blogspot.com/-mow4m_2pdxs/Vv8rEboII9I/AAAAAAAAA70/AR4X6Ls8ZhsG60fsIzCGngWiTr5-arPaw/s320/taritup.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
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</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://4.bp.blogspot.com/-6g7YRMwdgGc/Vv8rCMZOCVI/AAAAAAAAA7s/ADTBvfHVbhAznmTmHBq58uEoAXcoRUj4w/s1600/loginwindow.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://4.bp.blogspot.com/-6g7YRMwdgGc/Vv8rCMZOCVI/AAAAAAAAA7s/ADTBvfHVbhAznmTmHBq58uEoAXcoRUj4w/s320/loginwindow.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
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</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://3.bp.blogspot.com/-TsQSJyQBrj0/Vv8rBk8leOI/AAAAAAAAA7s/CobcRGbAqm0sHpYTLO_NtVzfg0fbySbJQ/s1600/dragitover.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="180" src="https://3.bp.blogspot.com/-TsQSJyQBrj0/Vv8rBk8leOI/AAAAAAAAA7s/CobcRGbAqm0sHpYTLO_NtVzfg0fbySbJQ/s320/dragitover.png" width="320" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
</div>
</div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Select it and next time you log in your ready to see your new mdm login screen.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
I included the base mdm file you'll need in the download along with my sample.</div>
<div class="separator" style="clear: both; text-align: left;">
Just add your own phaser creation and replace the files I added and your ready to roll.</div>
<div class="separator" style="clear: both; text-align: left;">
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.</div>
<div class="separator" style="clear: both; text-align: left;">
The site has tons of tutorials to teach you all you'll need to know.</div>
<div class="separator" style="clear: both; text-align: left;">
You can check out the examples here</div>
<div class="separator" style="clear: both; text-align: left;">
<a href="http://phaser.io/examples" target="_blank">http://phaser.io/examples</a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here is a short video of it in action in the emulator</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.blogger.com/video.g?token=AD6v5dx91n1dAVS3wlr2zi1Ui2HcoY_KLdNXHD9AUMfKROrHUIqIzakOnQM8smeXIT8hkonio8mefMi5lLmmxq0_dQ' class='b-hbp-video b-uploaded' frameborder='0'></iframe><br />
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Happy coding.</div>
<div class="separator" style="clear: both; text-align: left;">
Sam</div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Edit: thanks to MegMut over at the phaser forums http://www.html5gamedevs.com/topic/21659-phaser-tutorial-for-linux-mdm/</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
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.</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Here it is from MegMut:</div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
"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 <img alt=";)" data-emoticon="" height="20" src="http://www.html5gamedevs.com/uploads/emoticons/default_wink.png" title=";)" width="20" /> Here's the code <img alt=":)" data-emoticon="" height="20" src="http://www.html5gamedevs.com/uploads/emoticons/default_smile.png" title=":)" width="20" /></div>
<blockquote class="tr_bq">
<pre><code class=" hljs coffeescript">create() {
<span class="hljs-regexp">//</span> create the meteor group
<span class="hljs-keyword">this</span>.meteorGroup = <span class="hljs-keyword">this</span>.game.add.group;
<span class="hljs-keyword">this</span>.rocks = [<span class="hljs-number">5</span>, <span class="hljs-number">6</span>, <span class="hljs-number">7</span>, <span class="hljs-number">8</span>, <span class="hljs-number">9</span>];
<span class="hljs-keyword">this</span>.numOfMeteors = <span class="hljs-number">5</span>
<span class="hljs-keyword">for</span> (<span class="hljs-reserved">var</span> i = <span class="hljs-number">0</span>, i <= <span class="hljs-keyword">this</span>.numOfMeteors; i++) {
<span class="hljs-regexp">//</span> generate random x value between -<span class="hljs-number">150</span> <span class="hljs-keyword">and</span> the games width
<span class="hljs-reserved">var</span> x = <span class="hljs-keyword">this</span>.game.rnd.integerInRange(-<span class="hljs-number">150</span>, <span class="hljs-keyword">this</span>.game.width);
<span class="hljs-reserved">var</span> y = <span class="hljs-keyword">this</span>.game.rnd.integerInRange(<span class="hljs-number">0</span>, <span class="hljs-keyword">this</span>.game.height);
<span class="hljs-regexp">//</span> pick a random rock from the rocks array
<span class="hljs-reserved">var</span> rock = <span class="hljs-keyword">this</span>.rocks[Math.floor(Math.random()*<span class="hljs-keyword">this</span>.rocks.length)];
<span class="hljs-regexp">//</span> create the sprite
<span class="hljs-reserved">var</span> meteor = <span class="hljs-keyword">this</span>.game.add.sprite(x, y, <span class="hljs-string">"myatlas"</span>,<span class="hljs-string">"rock8"</span>)
<span class="hljs-regexp">//</span> pick a random speed <span class="hljs-keyword">for</span> the meteor to travel at
meteor.speed = <span class="hljs-keyword">this</span>.game.rnd.integerInRange(<span class="hljs-number">200</span>, <span class="hljs-number">250</span>);
<span class="hljs-regexp">//</span> pick a rancom spin <span class="hljs-keyword">for</span> the meteor
meteor.spin = <span class="hljs-keyword">this</span>.game.rnd.integerInRange(-<span class="hljs-number">3</span>, <span class="hljs-number">4</span>);
<span class="hljs-keyword">this</span>.meteorGroup.add(meteor);
}
}
update() {
<span class="hljs-keyword">for</span> (<span class="hljs-reserved">var</span> i = <span class="hljs-number">0</span>; i < <span class="hljs-keyword">this</span>.meteorGroup.children.length; i++) {
<span class="hljs-keyword">this</span>.meteorGroup.children[i].x += <span class="hljs-keyword">this</span>.meteorGroup.children[i].speed;
<span class="hljs-keyword">this</span>.meteorGrou.children[i].angle += <span class="hljs-keyword">this</span>.meteorGroup.children[i].spin;
<span class="hljs-regexp">//</span> use world wrap to allow the sprites to go <span class="hljs-literal">off</span> <span class="hljs-literal">on</span> side, <span class="hljs-keyword">and</span> <span class="hljs-keyword">continue</span> back <span class="hljs-literal">on</span> the other
<span class="hljs-keyword">this</span>.game.world.wrap(<span class="hljs-keyword">this</span>.meteorGroup.children[i], <span class="hljs-keyword">this</span>.meteorGroup.children[i].width, <span class="hljs-literal">false</span>, <span class="hljs-literal">true</span>, <span class="hljs-literal">true</span>);
<span class="hljs-regexp">//</span> alternativly, set start <span class="hljs-keyword">and</span> x positions <span class="hljs-keyword">for</span> the sprites individually <span class="hljs-keyword">and</span> perform a check <span class="hljs-literal">on</span> every update <span class="hljs-keyword">loop</span>
}
}</code></pre>
</blockquote>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: center;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
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" </div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
Thanks MegMut :) </div>
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
<div style="line-height: 100%; margin-bottom: 0cm;">
<br /></div>
Anonymousnoreply@blogger.com2tag:blogger.com,1999:blog-8568235513853407406.post-54834785803507199172016-03-28T21:48:00.001-07:002016-03-29T20:37:43.980-07:00HTML5 Games on the wayWell 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.<br />
After much research and studying I decided to use phaser (soon to be laser) framework.
It just works for me so far.<br />
You can check it out <a href="http://phaser.io/">here</a><br />
I tried a few IDE's including sublime and XDK but decided to choose phaser editor as main IDE for html5 games.<br />
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.<br />
You can check out the editor <a href="http://phasereditor.boniatillo.com/blog/">here</a><br />
Also it is LINUX friendly :)
here is an image of the phaser editor<br />
<br />
<a href="https://1.bp.blogspot.com/-V8KnQHvLdeM/VvsMH-NdULI/AAAAAAAAA6I/bGRaSiSpnBAslyOoN0BEYp8Q4pHjEipYA/s1600/phasereditorlinuxmint.png" imageanchor="1"><img border="0" src="https://1.bp.blogspot.com/-V8KnQHvLdeM/VvsMH-NdULI/AAAAAAAAA6I/bGRaSiSpnBAslyOoN0BEYp8Q4pHjEipYA/s320/phasereditorlinuxmint.png" /></a><br />
<br />
It should be a fun journey
I'll keep you updated as games progress.<br />
<br />
Just to give a quick taste of the first html5 game I am working here is a screenshot.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://2.bp.blogspot.com/-5GO8MNcWZv0/VvtF0PHwkoI/AAAAAAAAA6Y/rzwCkbjpSokkXNiDyy_mgfJoHSlJ7S2Fw/s1600/baboogastart.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="273" src="https://2.bp.blogspot.com/-5GO8MNcWZv0/VvtF0PHwkoI/AAAAAAAAA6Y/rzwCkbjpSokkXNiDyy_mgfJoHSlJ7S2Fw/s320/baboogastart.jpg" width="320" /></a></div>
<br />
I won't say what this game is going to be until finished but it is one of my wifes favorite style of game.<br />
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.<br />
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).<br />
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.<br />
<br />
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.<br />
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.<br />
SamAnonymousnoreply@blogger.com0tag:blogger.com,1999:blog-8568235513853407406.post-39760594158586706062014-11-10T13:49:00.001-08:002014-11-10T13:49:29.683-08:00Pet DuckThought I would share this video taken in 2010<br />
I reuploaded it as I had to rotate it, just a nice break.<br />
This was a duck that followed me into my wifes store so we had to get him over to the park so he wouldn't get run over or any harm to him.<br />
This little guy made me want a pet duck.<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<iframe allowfullscreen='allowfullscreen' webkitallowfullscreen='webkitallowfullscreen' mozallowfullscreen='mozallowfullscreen' width='320' height='266' src='https://www.youtube.com/embed/B8RJ5tumcok?feature=player_embedded' frameborder='0'></iframe></div>
<br />
Just a little breather inbetween me making games and fond memories when I lived in B.C.<br />
Enjoy.<br />
SamAnonymousnoreply@blogger.com0tag:blogger.com,1999:blog-8568235513853407406.post-1057860848664080482013-04-24T16:43:00.002-07:002013-04-24T16:43:49.944-07:00<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-j_SFm0a6alE/UCem_X_8IuI/AAAAAAAAAQc/61-DftPNXdA/s1600/samsstufficon128.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-j_SFm0a6alE/UCem_X_8IuI/AAAAAAAAAQc/61-DftPNXdA/s1600/samsstufficon128.png" /></a></div>
<br />
<br />
<br />
<br />
Linux Mint now has html5 coming for the new mdm.<br />
This got my curiosity up since I like making things that move around a screen, so I decided to make some animated mdm themes for the Linux Mint new mdm.<br />
You can check out all the themes I made here: http://samriggs.deviantart.com/gallery/<br />
<br />
Now to get this working on your Linux Mint machine there is instructions and a download to install and how to get it up and running go here: http://blog.linuxmint.com/?p=2327<br />
<br />
There is also a thread on the Linux Mint Forum to keep you updated on more themes and updates and just general new mdm stuff here: http://forums.linuxmint.com/viewtopic.php?f=25&t=126979<br />
<br />
This is a fascinating new twist on the mdm login screen allowing us to make pretty much anything that can be created in html5 for the login screen.<br />
Another great move for linux mint.<br />
SamAnonymousnoreply@blogger.com0tag:blogger.com,1999:blog-8568235513853407406.post-40497366709514538722012-05-13T18:57:00.002-07:002012-09-10T09:05:31.789-07:00Gimp 2.8 Finally<g:plusone annotation="inline"></g:plusone>
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-j_SFm0a6alE/UCem_X_8IuI/AAAAAAAAAQc/61-DftPNXdA/s1600/samsstufficon128.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="http://2.bp.blogspot.com/-j_SFm0a6alE/UCem_X_8IuI/AAAAAAAAAQc/61-DftPNXdA/s1600/samsstufficon128.png" /></a></div>
<br />
For all those waiting for this one, they finally released a stable version of gimp 2.8<br />
Got to admit it looks good, I was a bit worried but so far so good.<br />
Here is a screen shot I took<br />
<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="http://2.bp.blogspot.com/-imrGiBGVFSM/T7Bb5pPPLDI/AAAAAAAAAII/I7wjV7R2Bko/s1600/gimp28.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="http://2.bp.blogspot.com/-imrGiBGVFSM/T7Bb5pPPLDI/AAAAAAAAAII/I7wjV7R2Bko/s320/gimp28.png" width="320" /></a></div>
<br />
<br />
<br />
<br />
<br />
This is a new analog clock widget I am currently working on for the android phone.<br />
Yes I create it from scratch.<br />
Hopefully it will be on the market soon and I'll post a link on this site once it is up and ready for download.<br />
<br />
This one can now be downloaded for free by clicking on the link below<br />
<br />
<a href="http://play.google.com/store/apps/details?id=ca.samsstuff.steampunkanalogclock">
<img alt="Get it on Google Play" src="http://www.android.com/images/brand/get_it_on_play_logo_large.png" />
</a>
<br />
<br />
Notice the docks are all one now :) about time, but you also have the choice of the old docks you can control docking or non docking windows by going under windows > single window mode, check it to have it all one window or uncheck it to get it back to the old way (three separate windows), I deleted the plug in registry then after it was installed I went in and reinstalled it (for those who were wondering if they would disappear).<br />
The most joyous new addition to me is two things.<br />
Doing your text right on the canvas finally with lots of options we never had before.<br />
About time for this one.<br />
What does this mean? you can do more then one size color etc for one line instead of making them all separate and then lining them up afterwards.<br />
Then there is the one I have been waiting for a long long time.<br />
The cage transform tool.<br />
Oh ya I forgot to mention one of the greatest things gimpers added was the layer folders, now anyone that works with the gimpers and creates tons of layers know the importance of this add on, as you can see in the picture above, this was a piece of art I am currently working on and have not had the chance yet to create the folders, as you can see there is a heck of a lot of layers there for one image, just one part, like a number on the clock can take up to five to ten layers all on it's own to get the effects I want, as you can see by the scrollbar, there are a heck of aa lot of layers for what I have done so far, and that even has some layers merged already that I know I won't be changing later down the road.<br />
So this is why layer folders are so important and should of been added right from the get go, anyone who creates extremely detailed artwork knows they can get lost in layers very easily, with folders you can categorise your layers and shove them all in a folder, let's say I have a folder named numbers (for the numbers on the clock face) I would then shove all my clock number layers into one folder, nice and neat :) <br />
Then so on with each area, this gives me the ability to find a layer quickly and I don't have to go searching up and down constantly with hundreds of layers, I just go to the folder and close the rest of them and work in one folder at a time.<br />
Nice and convenient and a heck of a lot quicker and more organised.<br />
For someone who only works in a few layers, the old way is just fine but for hundreds of layers, it can quickly get out of control and confusing, especially if you don't name each layer properly, like new layer 1, new layer 1#1 lol try figuring out that one later after a 50 to a 100 layers lol or more.<br />
So yuppers layer folders a great addition that was needed for any serious gimpers artist long long ago, adobe had it long ago and as any serious gimpers will tell you, gimpers have a lot more to offer and for me anyhow has been a better program long long ago, I stopped working in photoshop literally years ago, and that is even on jobs for a company, the first thing I do is install my gimpers when I worked for companies.<br />
and inkscape, but as for most companies caught up in the adobe pay through the nose software, illustrator is still hard to get away from in companies, gimpers though :) not so hard once shown what it can do.<br />
Anyhow check it all out at gimp.org there is to many things to go into and just repeat what gimpers already said themselves.<br />
Check the release notes, that's where it has screen shots and information and how to download it and install it and how to install it while having gimp 2.6 in the same system if you want that also.<br />
For those who use xubuntu or ubuntu 12.04 there is a quick way of installing it.<br />
at ubuntugeek they say this, this also works for Linux Mint 13 (I use Linux Mint 13 xfce so I personally know it works on this and on xubuntu which I used for a bit).<br />
In case anyone was wondering it should work on all Linux Mint 13 versions.<br />
<br />
Open the terminal and run the following commands<br />
<br />
make sure you get rid of the old plugin registry this does not show that in this site.<br />
What I did was delete gimp and the registry first then did a install like below.<br />
You can install the registry either through the terminal or through the software center after 2.8 is installed, as far I now it, this has to be done because the old registry is not compatable but the new one is. I gave instructions below to install the registry below this.<br />
<br />
I deleted the gimp registry by using<br />
sudo apt-get remove gimp-plugin-registry<br />
Then did the one below <br />
<blockquote>
sudo apt-add-repository ppa:otto-kesselgulasch/gimp<br />
sudo apt-get update<br />
sudo apt-get install gimp</blockquote>
<br />
here is the link: http://www.ubuntugeek.com/how-to-install-gimp-2-8-in-ubuntu-using-ppa.html this one does not say what version of ubuntu so I am thinking this might be for everyone.<br />
Now the problem with the above is it does not remove the plugin registry first, this will cause issues, if you have done this then you will have to do a cleaning house abit.<br />
Here is what http://askubuntu.com/questions/132114/problem-on-12-04-with-gimp-2-8 says:<br />
Firstly remove the gimp 2.8 repo by running these commands<br />
sudo apt-get install ppa-purge<br />
sudo ppa-purge ppa:otto-kesselgulasch/gimp<br />
<hr />
And then run <br />
sudo apt-get update<br />
<hr />
now remove the plugin-regitery as it is not supported on 2.8<br />
sudo apt-get remove gimp-plugin-registry<br />
<hr />
Once thats done you can install Gimp 2.8<br />
sudo add-apt-repository ppa:otto-kesselgulasch/gimp<br />
sudo apt-get update<br />
sudo apt-get install gimp<br />
<br />
<br />
Once it is install you can install the registry plugins again I did mine through the software center by just clicking on the gimpers and clicking the added changes.<br />
Nice and easy :) and it worked for me I tested it.<br />
The other way for all you terminal (just got to do it that way) people which I am 90% of the time.<br />
Here ya go (remember this is after you removed the old gimp 2.6 then the old registry plugins then installed gimp 2.8 then install the registry.<br />
<br />
it can be found here: http://www.webupd8.org/2012/05/install-gimp-plugin-registry-for-gimp.html<br />
<br />
<pre class="linux-code"><code>sudo add-apt-repository ppa:otto-kesselgulasch/gimp
sudo apt-get update
sudo apt-get install gimp-plugin-registry</code></pre>
<br />
<br />
<b>Hope this helps</b><br />
<b>Sam </b> <br />
<br />
<br />Anonymousnoreply@blogger.com0