{"id":3095,"date":"2014-04-24T21:59:51","date_gmt":"2014-04-25T04:59:51","guid":{"rendered":"http:\/\/www.nathalielawhead.com\/candybox\/?p=3095"},"modified":"2014-04-27T12:49:39","modified_gmt":"2014-04-27T19:49:39","slug":"tutorial-building-a-game-with-flash-html5-canvas-createjs-haxatron-2000","status":"publish","type":"post","link":"https:\/\/www.nathalielawhead.com\/candybox\/tutorial-building-a-game-with-flash-html5-canvas-createjs-haxatron-2000","title":{"rendered":"Tutorial: Building A Game With Flash HTML5 Canvas & CreateJS (Haxatron 2000)"},"content":{"rendered":"

Introduction:<\/strong><\/p>\n

Flash Professional CC introduced a document type in which you can create an HTML5 Canvas document. It publishes HTML5 content using the CreateJS<\/a> libraries (but you could easily use other libraries if you wanted to).
\nAlthough this feature has been out for a while, there is little to no information (at least I couldn’t find much), about how to make something more complex in it (like a game).<\/p>\n

I love this development because (from Adobe documentation) “Flash publishes to HTML5 by leveraging the Canvas API. It translates objects created on stage in to their Canvas counterparts.” Meaning, I don’t have to worry about re-animating everything to accommodate a new development environment, and I can continue to use the assets already created… as well as the tools.
\nThis is still so much easier than having to do everything through code (XML or other). <\/p>\n

In this tutorial I hope to provide a concise resource on building an HTML5 document in Flash.
\nI will be updating this post as things surface.<\/p>\n

* DOWNLOAD the source files here: Haxatron2000_HTML5_Tutorial.zip<\/a><\/p>\n

* Play the finished game here: http:\/\/haxatron.alienmelon.com\/browserhax\/<\/a><\/p>\n

* Visit the Haxatron 2000 website here: http:\/\/haxatron.alienmelon.com\/<\/a><\/p>\n

\"\"<\/p>\n

Links about Flash and the HTML5 Canvas document type:<\/strong><\/p>\n

* Build HTML5 Canvas interactive games with Flash Professional CC<\/a>
\n* What is this “HTML Canvas” document in Flash Pro CC 13.1?<\/a>
\n* Flash Professional Help \/ Creating and publishing an HTML5 Canvas document<\/a><\/p>\n

Other Resources:<\/strong><\/p>\n

From what I’ve seen Adobe’s tools are still the best when it comes to creating vector art\/content.
\nYes, I am biased, because it fits into my workflow so well. :)
\nNevertheless, some other resources regarding vector\/SVG tools are:<\/p>\n

* A great list of SVG animation\/asset programs.<\/a><\/p>\n

Some libraries to help get started with SVG:<\/strong><\/p>\n

* Snap.svg<\/a>
\n“the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM.”
\n* Rapha\u00ebl\u2014JavaScript Library<\/a>
\n“Rapha\u00ebl is a small JavaScript library that should simplify your work with vector graphics on the web.”
\n* SVG.jg<\/a>
\n“A lightweight library for manipulating and animating SVG.”<\/p>\n

*************<\/p>\n

Issues Encountered & Resolved (Things To Look Out For):<\/strong><\/p>\n

Sounds loaded externally (via createjs.LoadQueue…) will fail in Safari, unless the sounds are also physically included in the library. Nevertheless, they DO work in Firefox, and Chrome without doing so.<\/p>\n

Sounds will also not work in Safari unless the quicktime plugin is installed (as per SoundJS documentation: http:\/\/createjs.com\/Docs\/SoundJS\/classes\/Sound.html<\/a>).<\/p>\n

Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls.<\/p>\n

You cannot modify the generated .html page, it will be overwritten next time you publish in Flash (not safe, like in Edge Animate), and your changes will be lost. My solution was to do everything in javascript, and not touch the .html page.<\/p>\n

*************<\/p>\n

SETTING UP THE DOCUMENT<\/strong><\/p>\n

All setting up and styling (css, scripts, style, etc…) is done in the document. I’ve kept it out of the generated .html page on purpose (reasons mentioned above). What I hope to do here is provide as many examples as possible<\/em> in order to help point you (or a googler) in the right direction.
\nCreating a better structure is up to you.<\/p>\n

So, walking through the setup…<\/p>\n

@fontface<\/code> rule. Described in further detail in the Fonts<\/strong> section bellow.<\/p>\n

<\/p>\n

\n
\/*JAVASCRIPT*\/<\/span>\r\n\r\nvar<\/span> font_fixedsys =<\/span> document<\/span>.createElement("style"<\/span>);\r\nfont_fixedsys.appendChild(document<\/span>.createTextNode("\\<\/span>\r\n@font-face {\\<\/span>\r\n    font-family: '"<\/span> +<\/span> 'fixedsys_excelsior_3'<\/span> +<\/span> "';\\<\/span>\r\n\tsrc: url('"<\/span> +<\/span> 'fontquirrels\/fsex300-webfont.eot?#iefix'<\/span> +<\/span> "') format('embedded-opentype'),\\<\/span>\r\n\t\t url('"<\/span> +<\/span> 'fontquirrels\/fsex300-webfont.woff'<\/span> +<\/span> "') format('woff'),\\<\/span>\r\n\t     url('"<\/span> +<\/span> 'fontquirrels\/fsex300-webfont.ttf'<\/span> +<\/span> "') format('truetype'),\\<\/span>\r\n\t\t url('"<\/span> +<\/span> 'fontquirrels\/fsex300-webfont.svg#fixedsys_excelsior_3.01Rg'<\/span> +<\/span> "') format('svg');\\<\/span>\r\n\tfont-weight: normal;\\<\/span>\r\n\tfont-style: normal;\\<\/span>\r\n}\\<\/span>\r\n"<\/span>));\r\n\r\ndocument<\/span>.head.appendChild(font_fixedsys);\r\n<\/pre>\n<\/div>\n
Including other javascript libraries is just as easy. You would use document.getElementsByTagName(\"head\")[0].appendChild(script);<\/code> to do so.
\nFurther links on the topic are, How to add jQuery in JS file<\/a>, Include a JavaScript file in a JavaScript file<\/a>, How to include a JavaScript file in another JavaScript file?<\/a>, and Include jQuery from another JavaScript file<\/a>.<\/p>\n
In this case, I am importing keymaster.js<\/code> (https:\/\/github.com\/madrobby\/keymaster<\/a>) — a simple micro-library for defining and dispatching keyboard shortcuts in web applications. In case of a game it’s good because it will reduce cross browser issues with keyboard keys (to a certain extent). Example of usage is in the Keyboard<\/strong> section.<\/p>\n
<\/p>\n
\n
\/\/Example of usage bellow in \/*KEYBOARD*\/ section<\/span>\r\nvar<\/span> js_misc =<\/span> document<\/span>.createElement("script"<\/span>);\r\njs_misc.src =<\/span> "libs\/keymaster.js"<\/span>;\r\njs_misc.type =<\/span> "text\/javascript"<\/span>;\r\ndocument<\/span>.getElementsByTagName("head"<\/span>)[0<\/span>].appendChild(js_misc);\r\n<\/pre>\n<\/div>\n
I am also controlling page elements, properties, style, etc…
\nThings like setting the background color of the page (and other styles).
\nFor more information refer to Traversing an HTML table with JavaScript and DOM Interfaces<\/a>
\nOr HTML DOM Style Object<\/a>
\nAs a good explanation on what I’m doing.<\/p>\n
In this case, I am saving references to page body, and the canvas — see var page_body<\/code> and var page_canvas<\/code>.
\nThen I’m applying styles to them.
\nI’m referencing page_canvas<\/code> in order to get the current height and width (useful for responsive designs, etc).<\/p>\n
<\/p>\n
\n
var<\/span> page_body =<\/span> document<\/span>.getElementsByTagName("body"<\/span>)[0<\/span>];\r\npage_body.style.backgroundColor =<\/span> "black"<\/span>;\r\n\/\/note, alternative would be: document.body.style.backgroundColor = "black";<\/span>\r\npage_body.style.overflow =<\/span> "hidden"<\/span>;\/\/hide scrollbars<\/span>\r\npage_body.style.position =<\/span> "fixed"<\/span>;\/\/no scroll. ever.<\/span>\r\n\r\n\/\/the canvas (this is the game)<\/span>\r\nvar<\/span> page_canvas =<\/span> document<\/span>.getElementsByTagName("canvas"<\/span>)[0<\/span>];\r\nstageWidth =<\/span> page_canvas.width;\r\nstageHeight =<\/span> page_canvas.height;\r\n<\/pre>\n<\/div>\n
Then I’m also displaying an “overlay” image above the page (scanlines).
\nAppending a div (or something else) above everything, and loading content into it (like an image), would look like,<\/p>\n
<\/p>\n
\n
\/\/Scanlines (I like scanlines)<\/span>\r\n\/\/alternatively, you should consider: http:\/\/createjs.com\/Docs\/EaselJS\/classes\/DOMElement.html<\/span>\r\nvar<\/span> overlay =<\/span> document<\/span>.createElement("div_overlay"<\/span>);\r\n\/\/make sure it's before the canvas - so inserting before<\/span>\r\ndocument<\/span>.body.insertBefore(overlay, page_canvas);\r\n\/\/create image and append overlay<\/span>\r\nvar<\/span> img =<\/span> document<\/span>.createElement("img"<\/span>);\r\nimg.src =<\/span> "images\/IMG_Scalines_DARK.png"<\/span>;\r\noverlay.appendChild(img);\r\n\/\/place it above everything (zIndex)<\/span>\r\noverlay.style.position =<\/span> "absolute"<\/span>;\r\noverlay.style.zIndex=<\/span>"999"<\/span>;\r\n<\/pre>\n<\/div>\n
ALTERNATIVELY, aside from all that I just mentioned, EaselJS comes with a DOMElement Class<\/code>.
\nIt’s recommended you use that. See: http:\/\/createjs.com\/Docs\/EaselJS\/classes\/DOMElement.html<\/a><\/p>\n
As a final note, we will want the page to be full screen, and preferably centered.
\nI picked two approaches to this which I thought would match common problems people might have\/wish to solve.<\/p>\n
Option #1 is for scaling the canvas proportionately (no centering). Thanks goes to CreateJS community support<\/a>, because no one likes reinventing the wheel. :) <\/p>\n
<\/p>\n
\n
function<\/span> onResize()\r\n{\r\n\t\/\/OPTION 1:<\/span>\r\n\t\/\/Scales proportionately<\/span>\r\n\t\/\/ browser viewport size<\/span>\r\n\tvar<\/span> w =<\/span> window<\/span>.innerWidth;\r\n\tvar<\/span> h =<\/span> window<\/span>.innerHeight;\r\n\t\/\/ stage dimensions<\/span>\r\n\tvar<\/span> ow =<\/span> 960<\/span>; \/\/ your stage width<\/span>\r\n\tvar<\/span> oh =<\/span> 640<\/span>; \/\/ your stage height<\/span>\r\n\t\/\/ keep aspect ratio<\/span>\r\n\tvar<\/span> scale =<\/span> Math<\/span>.min(w \/<\/span> ow, h \/<\/span> oh);\r\n\tvar<\/span> newHeight =<\/span> ow *<\/span> scale;\r\n\tvar<\/span> newWidth =<\/span> oh *<\/span> scale;\r\n\t\/\/<\/span>\r\n\tstage.scaleX =<\/span> scale;\r\n\tstage.scaleY =<\/span> scale;\r\n\t\/\/ adjust canvas size<\/span>\r\n\tstage.canvas.width =<\/span> newHeight;\r\n\tstage.canvas.height =<\/span> newWidth;\r\n\t\/\/set width and height variables again<\/span>\r\n\t\/\/var page_canvas = document.getElementsByTagName("canvas")[0];<\/span>\r\n\t\/\/stageWidth = page_canvas.width;<\/span>\r\n\t\/\/stageHeight = page_canvas.height;<\/span>\r\n\t\/\/<\/span>\r\n\t\/\/ update the stage<\/span>\r\n\tstage.update()\r\n}\r\n\/\/<\/span>\r\nwindow<\/span>.onresize =<\/span> function<\/span>()\r\n{\r\n     onResize();\r\n}\r\n\/\/call it on first run<\/span>\r\nonResize();\r\n<\/pre>\n<\/div>\n
Then there’s Option 2. This resizes and centers everything.
\nFor more information on doing this refer to How to dynamically resize and center a Flash CreateJS canvas element animation<\/a> –Which is a great discussion with more tips.<\/p>\n
<\/p>\n
\n
function<\/span> onResize()\r\n{\r\n\t\/\/OPTION 2: scale and center<\/span>\r\n\tvar<\/span> widthToHeight =<\/span> stageWidth \/<\/span> stageHeight;\r\n\tvar<\/span> newWidth =<\/span> window<\/span>.innerWidth;\r\n\tvar<\/span> newHeight =<\/span> window<\/span>.innerHeight;\r\n\tvar<\/span> newWidthToHeight =<\/span> newWidth \/<\/span> newHeight;\r\n\t\/\/<\/span>\r\n\tif<\/span> (newWidthToHeight ><\/span> widthToHeight)\r\n\t{\r\n\t\tnewWidth =<\/span> newHeight *<\/span> widthToHeight;\r\n\t\tpage_canvas.style.height =<\/span> newHeight +<\/span> "px"<\/span>;\r\n\t\tpage_canvas.style.width =<\/span> newWidth +<\/span> "px"<\/span>;\r\n\t} else<\/span> {\r\n\t\tnewHeight =<\/span> newWidth \/<\/span> widthToHeight;\r\n\t\tpage_canvas.style.height =<\/span> newHeight +<\/span> "px"<\/span>;\r\n\t\tpage_canvas.style.width =<\/span> newWidth +<\/span> "px"<\/span>;\r\n\t}\r\n\t\tscale =<\/span> newWidthToHeight \/<\/span> widthToHeight;\r\n\t\tstage.width =<\/span> newWidth;\r\n\t\tstage.height =<\/span> newHeight;\r\n\t\tpage_canvas.style.marginTop =<\/span> ((window<\/span>.innerHeight -<\/span> newHeight) \/<\/span> 2<\/span>) +<\/span> "px"<\/span>;\r\n\t\tpage_canvas.style.marginLeft =<\/span> ((window<\/span>.innerWidth -<\/span> newWidth) \/<\/span> 2<\/span>) +<\/span> "px"<\/span>;\r\n\t\/\/<\/span>\r\n}\r\n\/\/<\/span>\r\nwindow<\/span>.onresize =<\/span> function<\/span>()\r\n{\r\n     onResize();\r\n}\r\n\/\/call on first run<\/span>\r\nonResize();\r\n<\/pre>\n<\/div>\n
*************<\/p>\n
FONTS, TEXT FIELDS & EFFECTS<\/strong><\/p>\n
\"\"<\/p>\n
For starters, the link to the Text Class<\/code>:
\nhttp:\/\/createjs.com\/Docs\/EaselJS\/classes\/Text.html<\/a><\/p>\n
There are a few ways of getting fonts to work in your project. It isn’t as simple as “publishing” your project. The font will not show for visitors\/players unless that font is installed on their machine.
\nSo you can use a couple of methods to get that to work.<\/p>\n
You can use @fontface<\/code><\/a>.
\nIn this tutorial that is what I’m doing. The font I’m using is Fixedsys Excelsior<\/a>, as generated from fontsquirrel<\/a> with some fall back fonts (monaco, lucidia console<\/a>, etc…).
\nNote that @fontface<\/code> may fail if the font is not loaded when it’s drawn.<\/p>\n
You can also use Bitmap Text (more advisable for games, but unsupported). A tutorial for implementing this is:
\nBitmap Font Support for CreateJS<\/a><\/p>\n
Or web fonts:
\nhttp:\/\/www.createjs.com\/tutorials\/Fonts\/<\/a><\/p>\n
Like I mentioned earlier, modifying the generated .html page will result in your changes being lost next time you publish. To get around this I challenged myself to not touching the .html page, and relying on javascript for everything.
\nThere are a number of ways of doing this (for example Appending Style Nodes with Javascript<\/a>, or like a simple google search<\/a> would show).
\nI’m certain there are better ways, but I’m doing it this way.<\/p>\n
Following is the @fontface<\/code> rule:<\/p>\n
<\/p>\n
\n
var<\/span> font_fixedsys =<\/span> document<\/span>.createElement("style"<\/span>);\r\nfont_fixedsys.appendChild(document<\/span>.createTextNode("\\<\/span>\r\n@font-face {\\<\/span>\r\n    font-family: '"<\/span> +<\/span> 'fixedsys_excelsior_3'<\/span> +<\/span> "';\\<\/span>\r\n\tsrc: url('"<\/span> +<\/span> 'fontquirrels\/fsex300-webfont.eot?#iefix'<\/span> +<\/span> "') format('embedded-opentype'),\\<\/span>\r\n\t\t url('"<\/span> +<\/span> 'fontquirrels\/fsex300-webfont.woff'<\/span> +<\/span> "') format('woff'),\\<\/span>\r\n\t     url('"<\/span> +<\/span> 'fontquirrels\/fsex300-webfont.ttf'<\/span> +<\/span> "') format('truetype'),\\<\/span>\r\n\t\t url('"<\/span> +<\/span> 'fontquirrels\/fsex300-webfont.svg#fixedsys_excelsior_3.01Rg'<\/span> +<\/span> "') format('svg');\\<\/span>\r\n\tfont-weight: normal;\\<\/span>\r\n\tfont-style: normal;\\<\/span>\r\n}\\<\/span>\r\n"<\/span>));\r\n\r\ndocument<\/span>.head.appendChild(font_fixedsys);\r\n<\/pre>\n<\/div>\n
This gets the font ready to use. You could use just one source, but most recommended formats are included in this case.<\/p>\n
There are going to be many text fields, so I’m saving the properties as variables.<\/p>\n
<\/p>\n
\n
\/\/text field properties<\/span>\r\ntxtCol =<\/span> "#00FF00"<\/span>;\/\/the text color<\/span>\r\ntxtFont =<\/span> "26px 'fixedsys_excelsior_3', 'Lucida Console', Monaco, monospace"<\/span>; \/\/large text field<\/span>\r\ntxtFont_sml =<\/span> "15px 'fixedsys_excelsior_3', 'Lucida Console', Monaco, monospace"<\/span>; \/\/small subtext<\/span>\r\n<\/pre>\n<\/div>\n
And now create the text field, with the font.<\/p>\n
<\/p>\n
\n
\/\/Create text fields<\/span>\r\ntxt_title =<\/span> new<\/span> createjs.Text("Haxatron 2000"<\/span>, txtFont, txtCol);\r\ntxt_title.x =<\/span> 384<\/span>;\r\ntxt_title.y =<\/span> 197<\/span>;\r\nthis<\/span>.addChild(txt_title); \/\/add to stage<\/span>\r\n\/\/shadow is much like glow, so I'll use shadow<\/span>\r\n\/\/color String = The color of the shadow.<\/span>\r\n\/\/offsetX Number = The x offset of the shadow in pixels.<\/span>\r\n\/\/offsetY Number = The y offset of the shadow in pixels.<\/span>\r\n\/\/blur Number = The size of the blurring effect.<\/span>\r\n\/\/See: http:\/\/www.createjs.com\/Docs\/EaselJS\/classes\/Shadow.html for more<\/span>\r\ntxt_title.shadow =<\/span> new<\/span> createjs.Shadow("#00FF00"<\/span>, 3<\/span>, 0<\/span>, 10<\/span>);\r\n<\/pre>\n<\/div>\n
Here the field is txt_title<\/code>.
\nThe game has a glow filter applied to all text fields. CreateJS does not have a glow filter, so I’m using shadow (which is similar).
\nSee: http:\/\/www.createjs.com\/Docs\/EaselJS\/classes\/Shadow.html<\/a> for more information.<\/p>\n
Text Effects (Write Out):<\/em><\/p>\n
The game writes out text to the created text fields. It’s a cute, and classic effect.
\nThe function is a simple one,<\/p>\n
<\/p>\n
\n
\/\/Write out text<\/span>\r\nvar<\/span> writeInt;\r\nwriteText =<\/span> function<\/span>(myText, myTextField) {\r\n\tvar<\/span> i =<\/span> 0<\/span>;\r\n\tfunction<\/span> write() {\r\n\t\tif<\/span> (i<=<\/span>myText.length) {\r\n\t\t\tmyTextField.text =<\/span> myText.substr(0<\/span>, i)+<\/span>"_"<\/span>;\r\n\t\t\trandTypeSnd();\r\n\t\t\ti =<\/span> i+<\/span>1<\/span>;\r\n\t\t} else<\/span> {\r\n\t\t\tmyTextField.text =<\/span> myText.substr(0<\/span>, i);\r\n\t\t\tclearInterval(writeInt);\r\n\t\t}\r\n\t}\r\n\tclearInterval(writeInt);\r\n\twriteInt =<\/span> setInterval(write, 40<\/span>);\r\n}\r\n<\/pre>\n<\/div>\n
To use it you call, writeText(\"My text as string.\", txt_myTextField);<\/code>
\nThis function, and most of the game, uses setInterval<\/code><\/a> a lot, so as to not deviate from the original code too much. For other options see the Ticker Class: http:\/\/createjs.com\/Docs\/EaselJS\/classes\/Ticker.html<\/a>
\nIn the above example, as long as i<\/code> is less than the length<\/code> of your string continue writing. Increment i<\/code> with every letter written.
\nWith each character added to the text field, a random typing sound plays. That’s what randTypeSnd();<\/code> is.<\/p>\n
Clearing Text Field (Scene Change):<\/em><\/p>\n
The game is keyboard only. Once you’ve made your selection from any of the menus, the text fields need to be cleared before proceeding to the next screen. There is one function called clearText<\/code> responsible for this… Which is as simple as,<\/p>\n
<\/p>\n
\n
\/\/clearing all text fields<\/span>\r\n\/\/for going between scenes<\/span>\r\nclearText =<\/span> function<\/span>(){\r\n\tvar<\/span> arr_fields =<\/span> new<\/span> Array<\/span>(txt_title, txt_start, txt_faq, txt_msg, txt_msg_win, txt_stats_win, txt_seconds_win, txt_tries_win, txt_options_win, txt_option1_win, txt_option2_win);\r\n\tfor<\/span>(i=<\/span>0<\/span>; i<<\/span>arr_fields.length; ++<\/span>i){\r\n\t\tarr_fields[i].text =<\/span> ""<\/span>;\r\n\t};\r\n}\r\n<\/pre>\n<\/div>\n
And that’s it for text…<\/p>\n
\"\"<\/p>\n
*************<\/p>\n
SOUND<\/strong><\/p>\n
\"\"<\/p>\n
Two things that are important. They are the SoundJS<\/a> and PreloadJS<\/a> libraries. If you’re familiar with HTML5 development, then you’re familiar with the messiness that is cross-browser audio support. SoundJS solves most of that.
\nTwo great articles are:
\nSoundJS: Mobile Safe Approach<\/a>
\nand SoundJS: Preloading Audio<\/a>
\nThey cover this pretty well.
\nThe documentation for SoundJS is here http:\/\/www.createjs.com\/Docs\/SoundJS\/modules\/SoundJS.html<\/a>
\nCheck out the examples here (sourcecode): https:\/\/github.com\/CreateJS\/SoundJS\/tree\/master\/examples<\/a>
\nAnd here is a great example of use in a game: https:\/\/github.com\/CreateJS\/SoundJS\/blob\/master\/examples\/Game.html<\/a><\/p>\n
Note, sounds will not play in Safari unless they are also included in the library (if you’re working with Flash CC). This does not happen in Chrome or Firefox. Sounds can be loaded from an external source without that problem in both those browsers.
\nSounds in Safari also require the quicktime plugin to be installed in order to play.<\/p>\n
Following is a breakdown of the VERY basics of playing a sound:<\/p>\n
<\/p>\n
\n
\/\/to play a sound that's in the library<\/span>\r\ncreatejs.Sound.play("Die"<\/span>);\r\n\r\n\/\/to play a sound that's in a library, and use again<\/span>\r\n\/\/AUD_Die is the reference.<\/span>\r\nAUD_Die =<\/span> createjs.Sound.play("sounds\/Die.mp3"<\/span>);\/\/call once<\/span>\r\n\/\/play anytime after that<\/span>\r\nAUD_Die.play();\r\n\r\n\/\/to loop a sound<\/span>\r\n\/\/http:\/\/createjs.com\/Docs\/SoundJS\/classes\/SoundInstance.html<\/span>\r\n\/*Once a SoundInstance is created, <\/span>\r\na reference can be stored that can be used <\/span>\r\nto control the audio directly through the SoundInstance. <\/span>\r\nIf the reference is not stored, <\/span>\r\nthe SoundInstance will play out its audio (and any loops), <\/span>\r\nand is then de-referenced from the Sound class*\/<\/span>\r\n\/\/<\/span>\r\nvar<\/span> myInstance =<\/span> createjs.Sound.play("sounds\/Die.mp3"<\/span>, {loop:<\/span>2<\/span>});\/\/loop:NUM = number of times to loop<\/span>\r\nmyInstance.addEventListener("loop"<\/span>, handleLoop);\r\nfunction<\/span> handleLoop(event) {\r\n\tmyInstance.volume =<\/span> myInstance.volume *<\/span> 0.5<\/span>;\/\/fades out...<\/span>\r\n}\r\n<\/pre>\n<\/div>\n
For more detail, see the Sound docs: http:\/\/www.createjs.com\/Docs\/SoundJS\/classes\/Sound.html<\/a><\/p>\n
Sound can be used as a plugin with PreloadJS to help preload audio properly. When it’s preloaded with PreloadJS it is automatically registered. If sound is not preloaded from the outset it will do an internal load, as a result audio may not play immediately the first time you call it. It is recommended that you preload all audio.
\nThis is what I’m doing. All audio is loaded externally from the “sounds<\/code>” folder, and preloaded. <\/p>\n
First I save the assetPath<\/code> (directory), and then make a manifest<\/code> — register them for loading and playback.
\nid<\/code> = the name you want to give them.
\nsrc<\/code> = the filename.
\nThe last line, var queue<\/code>, creates a new LoadQueue<\/code> instance.
\nLoadQueue<\/code><\/a> can preload either a single file, or queue of files. Here it’s many files.<\/p>\n
<\/p>\n
\n
\/\/based on: http:\/\/createjs.com\/tutorials\/SoundJS%20and%20PreloadJS\/<\/span>\r\n\/\/assetsPath = A path that will be prepended on to the <\/span>\r\n\/\/source parameter of all items in the queue before they are loaded.<\/span>\r\nvar<\/span> assetsPath =<\/span> "sounds\/"<\/span>;\r\nvar<\/span> snd_manifest =<\/span> [\r\n\t{id:<\/span>"Die"<\/span>, src:<\/span>"Die.ogg"<\/span>},\r\n\t{id:<\/span>"Intro"<\/span>, src:<\/span>"Intro.ogg"<\/span>},\r\n\t{id:<\/span>"Move1"<\/span>, src:<\/span>"Move1.ogg"<\/span>},\r\n\t{id:<\/span>"Move2"<\/span>, src:<\/span>"Move2.ogg"<\/span>},\r\n\t{id:<\/span>"Spawn"<\/span>, src:<\/span>"Spawn.ogg"<\/span>},\r\n\t{id:<\/span>"TransitionNewScene"<\/span>, src:<\/span>"TransitionNewScene.ogg"<\/span>},\r\n\t{id:<\/span>"Aud_Type1"<\/span>, src:<\/span>"Typing1.ogg"<\/span>},\r\n\t{id:<\/span>"Aud_Type2"<\/span>, src:<\/span>"Typing2.ogg"<\/span>},\r\n\t{id:<\/span>"Aud_Type3"<\/span>, src:<\/span>"TypingNewline.ogg"<\/span>},\r\n\t{id:<\/span>"TypingSelect"<\/span>, src:<\/span>"TypingSelect.ogg"<\/span>},\r\n\t{id:<\/span>"Win"<\/span>, src:<\/span>"Win.ogg"<\/span>}\r\n];\r\n\r\n\/\/[useXHR=true], [basePath=""]<\/span>\r\nvar<\/span> queue =<\/span> new<\/span> createjs.LoadQueue(true<\/span>, assetsPath);\r\n<\/pre>\n<\/div>\n
As you’ve noticed I’m specifying .ogg<\/code> as the default sound format.
\nSoundJS will only preload audio that is supported (by the users browser). If multiple formats are provided, only the one that the browser can play will be preloaded.
\nYou can specify other alternate extensions via alternateExtensions<\/code>. See: http:\/\/www.createjs.com\/Docs\/SoundJS\/classes\/Sound.html#property_alternateExtensions<\/a>
\nIt’s an array of extensions to attempt to use when loading sound, if the default is unsupported by the active plugin.
\nI’m giving mp3<\/code>, and wav<\/code> as alternatives.<\/p>\n
<\/p>\n
\n
\/\/alternateExtensions = array of extensions to attempt to use when loading sound<\/span>\r\ncreatejs.Sound.alternateExtensions =<\/span> ["mp3"<\/span>, "wav"<\/span>];\r\n\r\n\/\/Install the SoundJS sound class -- to load the HTML audio. <\/span>\r\n\/\/Should be installed before loading any audio files.<\/span>\r\nqueue.installPlugin(createjs.Sound);\r\n<\/pre>\n<\/div>\n
PreloadJS supports the following listeners:
\ncomplete<\/code>: fired when a queue completes loading all files
\nerror<\/code>: fired when the queue encounters an error with any file.
\nprogress<\/code>: Progress for the entire queue has changed.
\nfileload<\/code>: A single file has completed loading.
\nfileprogress<\/code>: Progress for a single file has changes. Note that only files loaded with XHR<\/code> (or possibly by plugins) will fire progress events other than 0 or 100%.<\/p>\n
I have two. One for when the load is complete<\/code> (which plays — continues), and the other to keep track of the loading progress<\/code> (in this case it just sends to console.log<\/code>). <\/p>\n
<\/p>\n
\n
\/\/two event listeners - one when load is complete, and the other to display the load progress<\/span>\r\nqueue.addEventListener("complete"<\/span>, handleComplete);\r\nqueue.addEventListener("progress"<\/span>, handleProgress);\r\n<\/pre>\n<\/div>\n
Load manifest<\/code> is to load multiple sounds\/a set of them. See: http:\/\/createjs.com\/Docs\/PreloadJS\/classes\/LoadQueue.html#method_loadManifest<\/a><\/p>\n
<\/p>\n
\n
queue.loadManifest(snd_manifest);\r\n\/\/to load an individual file:<\/span>\r\n\/\/queue.loadFile({id:"Die", src:"sounds\/Die.ogg"});<\/span>\r\n\r\nfunction<\/span> handleComplete(evt) {\r\n\tconsole.log("Loading sound complete."<\/span>);\r\n\tplaySound("Spawn"<\/span>);\/\/"LOADED" sound indication<\/span>\r\n\ttxt_title.text =<\/span> ""<\/span>;\r\n\t\/\/play the timeline after loading (continue)<\/span>\r\n\t_stage.play();\r\n}\r\n\r\nfunction<\/span> handleProgress(evt) {\r\n\t\/\/console.log("Event Loading: " + (queue.progress.toFixed(2) * 100) + "%");<\/span>\r\n}\r\n<\/pre>\n<\/div>\n
Finally, I have two functions. One for playing a sound. The other for playing a sound loop.
\nIf you wanted to play a sound, now all you would have to do is call playSound(\"SOUND_NAME\");<\/code><\/p>\n
<\/p>\n
\n
function<\/span> playSound(name) {\r\n\treturn<\/span> createjs.Sound.play(name);\r\n}\r\n\r\nfunction<\/span> playSoundLoop(name, loops){\r\n\treturn<\/span> createjs.Sound.play(name, {loop:<\/span>loops});\r\n};\r\n<\/pre>\n<\/div>\n
The game has this cute little typing effect. Whenever a word gets typed, a random type sound plays.
\nThe function for that looks like this:<\/p>\n
<\/p>\n
\n
\/\/set up an array of typing sounds<\/span>\r\nArr_TypingSnds =<\/span> new<\/span> Array<\/span>("Aud_Type1"<\/span>, "Aud_Type2"<\/span>);\r\n\/\/chose a random typing sound and play it<\/span>\r\n\/\/for text writing<\/span>\r\nrandTypeSnd =<\/span> function<\/span>() {\r\n\tvar<\/span> randNum =<\/span> Math<\/span>.ceil(Math<\/span>.random()*<\/span>(Arr_TypingSnds.length))-<\/span>1<\/span>;\r\n\tvar<\/span> randomSound =<\/span> Arr_TypingSnds[randNum];\r\n\tif<\/span>(randomSound==<\/span>undefined<\/span>){\r\n\t\trandomSound =<\/span> Arr_TypingSnds[0<\/span>];\r\n\t};\r\n\tplaySound(randomSound);\r\n}\r\n<\/pre>\n<\/div>\n
*************<\/p>\n
KEYBOARD CONTROLS<\/strong><\/p>\n
I have two examples here.
\nIf problems arise, for example, numbers may differ cross browsers, I would recommend using keymaster.js<\/code> (https:\/\/github.com\/madrobby\/keymaster<\/a>) over the “classic” version.
\nkeymaster.js<\/code> is the javascript library we appended earlier.<\/p>\n
Following is how you would implement keymaster.js<\/code><\/p>\n
<\/p>\n
\n
\/\/keymaster.js keyboard:<\/span>\r\n\/\/create ticker: http:\/\/createjs.com\/Docs\/EaselJS\/classes\/Ticker.html<\/span>\r\n\/\/to handle keyboard input<\/span>\r\n\r\ncreatejs.Ticker.addEventListener("tick"<\/span>, keyboard_ticker);\r\n\r\nfunction<\/span> keyboard_ticker(event) {\r\n\tif<\/span> (key.isPressed("up"<\/span>) ||<\/span> key.isPressed("w"<\/span>)) {\r\n\t\tconsole.log("UP pressed"<\/span>);\r\n\t}\r\n\tif<\/span> (key.isPressed("down"<\/span>) ||<\/span> key.isPressed("s"<\/span>)) {\r\n\t\tconsole.log("DOWN pressed"<\/span>);\r\n\t}\r\n\tif<\/span> (key.isPressed("left"<\/span>) ||<\/span> key.isPressed("a"<\/span>)) {\r\n\t\tconsole.log("LEFT pressed"<\/span>);\r\n\t}\r\n\tif<\/span> (key.isPressed("right"<\/span>) ||<\/span> key.isPressed("d"<\/span>)) {\r\n\t\tconsole.log("RIGHT pressed"<\/span>);\r\n\t}\r\n}\r\n<\/pre>\n<\/div>\n
You can see, it’s a lot simpler.
\nI am using the “normal” keyboard functionality (document.onkeydown<\/code> and document.onkeyup<\/code>).
\nOther good examples of (similar) keyboard use in createjs games are:
\nhttps:\/\/github.com\/CreateJS\/EaselJS\/blob\/master\/examples\/Game.html<\/a>
\nand https:\/\/github.com\/javierj\/EaselJS\/blob\/master\/KeyboardDemo\/DemoKeyboard.html<\/a><\/p>\n
So, first set up the key codes:<\/p>\n
<\/p>\n
\n
KEY_ENTER =<\/span> 13<\/span>;\r\nKEY_SPACE =<\/span> 32<\/span>;\r\nKEY_ESC =<\/span> 27<\/span>;\r\nKEY_UP =<\/span> 38<\/span>;\r\nKEY_DOWN =<\/span> 40<\/span>;\r\nKEY_LEFT =<\/span> 37<\/span>;\r\nKEY_RIGHT =<\/span> 39<\/span>;\r\nKEY_W =<\/span> 87<\/span>;\r\nKEY_A =<\/span> 65<\/span>;\r\nKEY_S =<\/span> 83<\/span>;\r\nKEY_D =<\/span> 68<\/span>;\r\n<\/pre>\n<\/div>\n
And then create the key down event:<\/p>\n
<\/p>\n
\n
evnt_KEYDOWN =<\/span> function<\/span>(e){\r\n\t\/\/cross browser issues exist<\/span>\r\n\tif<\/span>(!<\/span>e){ var<\/span> e =<\/span> window<\/span>.event; }\r\n\t\/\/<\/span>\r\n\tconsole.log("press "<\/span> +<\/span> e.keyCode);\r\n\t\/\/<\/span>\r\n\tif<\/span>(_scene ==<\/span> "faq"<\/span>){\r\n\t\t\/\/escape - back to menu<\/span>\r\n\t\tif<\/span>(e.keyCode ==<\/span> KEY_ESC ||<\/span> e.keyCode ==<\/span> KEY_SPACE ||<\/span> e.keyCode ==<\/span> KEY_ENTER){\r\n\t\t\tplaySound("TypingSelect"<\/span>);\r\n\t\t\tselectedMenuItem =<\/span> "menu"<\/span>;\r\n\t\t\ttransition();\r\n\t\t};\r\n\t};\r\n\t\/\/<\/span>\r\n\tif<\/span>(_scene ==<\/span> "menu"<\/span>){\r\n\t\t\/\/make menu sellection<\/span>\r\n\t\tif<\/span>(e.keyCode ==<\/span> KEY_SPACE ||<\/span> e.keyCode ==<\/span> KEY_ENTER){\r\n\t\t\tplaySound("TypingSelect"<\/span>);\r\n\t\t\ttransition();\r\n\t\t};\r\n\t\t\/\/up\/down on menu items<\/span>\r\n\t\t\/\/only two items, so, simply put...<\/span>\r\n\t\tif<\/span>(e.keyCode ==<\/span> KEY_UP){\r\n\t\t\twriteText("START"<\/span>,txt_start);\r\n\t\t\tselectItem("game"<\/span>,txt_start,txt_faq);\r\n\t\t};\r\n\t\tif<\/span>(e.keyCode ==<\/span> KEY_DOWN){\r\n\t\t\twriteText("WIKI"<\/span>,txt_faq);\r\n\t\t\tselectItem("faq"<\/span>,txt_faq,txt_start);\r\n\t\t};\r\n\t};\r\n\t\/\/<\/span>\r\n\tif<\/span>(_scene ==<\/span> "menu_win"<\/span>){\r\n\t\t\/\/select - if "submit" submit to twitter - if "game" then hack again<\/span>\r\n\t\tif<\/span>(e.keyCode ==<\/span> KEY_SPACE ||<\/span> e.keyCode ==<\/span> KEY_ENTER){\r\n\t\t\tif<\/span> (selectedMenuItem ==<\/span> "submit"<\/span>) {\r\n\t\t\t\ttinyURL();\r\n\t\t\t}\r\n\t\t\tif<\/span>(selectedMenuItem ==<\/span> "game"<\/span>){\r\n\t\t\t\tplaySound("TypingSelect"<\/span>);\r\n\t\t\t\ttransition();\r\n\t\t\t}\r\n\t\t};\r\n\t\tif<\/span>(e.keyCode ==<\/span> KEY_UP){\r\n\t\t\twriteText("Submit This Hack"<\/span>,txt_option1_win);\r\n\t\t\tselectItem("submit"<\/span>,txt_option1_win,txt_option2_win);\r\n\t\t};\r\n\t\tif<\/span>(e.keyCode ==<\/span> KEY_DOWN){\r\n\t\t\twriteText("Hack Again"<\/span>,txt_option2_win);\r\n\t\t\tselectItem("game"<\/span>,txt_option2_win,txt_option1_win);\r\n\t\t};\r\n\t};\r\n\t\/\/<\/span>\r\n};\r\n<\/pre>\n<\/div>\n
There are several “scenes”\/areas in the game (excluding the actual game), all of which do something different.
\nI’m using one keyboard event for all of them (excluding the game). If _scene<\/code> variable is equal to that area, then keyboard functionality for that unlocks.
\nwriteText(\"\",txt_field)<\/code> is the write text function. When you select a menu item it should write out the text (indicating that you select it).
\nThe other function selectItem(\"scene\",txt_field1,txt_field2)<\/code> is setting up the variables for your next selection, and toggling the alpha between the two text fields (to make it obvious which one you’re selecting).
\nIt looks like this:<\/p>\n
<\/p>\n
\n
\/\/For menu item selection<\/span>\r\n\/\/toggles the alpha between items, <\/span>\r\n\/\/and sets the selectedMenuItem to current selection<\/span>\r\nselectItem =<\/span> function<\/span>(selectedItm, currItem, prevItem) {\r\n\tplaySound("Aud_Type3"<\/span>);\r\n\tselectedMenuItem =<\/span> selectedItm;\r\n\tprevItem.alpha =<\/span> 1<\/span>;\r\n\tcurrItem.alpha =<\/span> 0.5<\/span>;\r\n}\r\n<\/pre>\n<\/div>\n
Once you want to select that (SPACE<\/code>, or ENTER<\/code>). Another function, transition();<\/code>, is called to go to that selected scene\/area.<\/p>\n
transition();<\/code> looks like:<\/p>\n
<\/p>\n
\n
\/\/transition<\/span>\r\n\/\/plays a sound when you change screens<\/span>\r\n\/\/also handles miscelaneous clearing<\/span>\r\ntransition =<\/span> function<\/span>() {\r\n\tplaySound("TransitionNewScene"<\/span>);\r\n\t\/\/<\/span>\r\n\t\/\/clear all fields<\/span>\r\n\tclearText();\r\n\t\/\/<\/span>\r\n\t_stage.gotoAndPlay(selectedMenuItem);\r\n}\r\n<\/pre>\n<\/div>\n
\"\"<\/p>\n
“menu_win<\/code>” keyboard event is just a little different in that it also offers you the choice to submit your stats to twitter. tinyURL();<\/code>
\nWhich is:<\/p>\n
<\/p>\n
\n
\/\/Twitter (submit everything to twitter) -- see menu_win<\/span>\r\ntinyURL =<\/span> function<\/span>(){\r\n\tvar<\/span> url =<\/span> "http:\/\/twitter.com\/home?status=I haxed teh system with Haxatron 2000: "<\/span>+<\/span>pageURL+<\/span>" in "<\/span>+<\/span>seconds+<\/span>" seconds, and "<\/span>+<\/span>tries+<\/span>" tries. Haxing is tricky business."<\/span>;\r\n\twindow<\/span>.open(url,"_blank"<\/span>);\r\n}\r\n<\/pre>\n<\/div>\n
\"\"<\/p>\n
*************<\/p>\n
THE GAME ENGINE<\/strong><\/p>\n
Starting with the higher level game specific logic, this first section handles the map, map tiles, and drawing\/redrawing it.
\nThere are three types of tiles:
\nExit<\/code><\/strong> = the exit\/goal to navigate the player to.
\n\"\"
\nPlayer<\/code><\/strong> = the little green guy – controllable character.
\n\"\"
\nMemory<\/code><\/strong> = the main tile of the game. It has 3 states – up, down, error (red).
\n\"\"
\n\"\"<\/p>\n
First of all I’ll walk you through the variables…<\/p>\n
<\/p>\n
\n
\/\/\/\/\/\/\/\/\/\/\/<\/span>\r\n\/\/ Higher-level, global game-specific logic and resources.<\/span>\r\n\/\/\/\/\/\/\/\/\/\/<\/span>\r\n\r\nvar<\/span> gameTileParent; \/\/Sprite<\/span>\r\nvar<\/span> gameLoops =<\/span> {mapRedraw:<\/span> -<\/span>1<\/span>}; \/\/Object, see: http:\/\/www.w3schools.com\/js\/js_objects.asp for more info<\/span>\r\nvar<\/span> gameTileSize =<\/span> 100<\/span>;\/\/the size of the tile in both width and height<\/span>\r\nvar<\/span> gameCurrentMap; \/\/Object - see gameLoadMap(...) for what goes in this<\/span>\r\n\/\/intervals for changing and redrawing, see gameStartMapRedraw()<\/span>\r\nvar<\/span> changeInt =<\/span> 30<\/span>;\r\nvar<\/span> redrawInt =<\/span> 50<\/span>;\r\nvar<\/span> shouldCenterMap =<\/span> true<\/span>;\/\/true = centered. false = not... In the event this is a map that should not be centered<\/span>\r\n<\/pre>\n<\/div>\n
var gameTileParent<\/code> will be the container that all the tiles, and player are placed in.
\nFrom the docs http:\/\/createjs.com\/Docs\/EaselJS\/classes\/Container.html<\/a> : “A Container is a nestable display list that allows you to work with compound display elements. For example you could group arm, leg, torso and head Bitmap instances together into a Person Container, and transform them as a group, while still being able to move the individual parts relative to each other. Children of containers have their transform and alpha properties concatenated with their parent Container.”
\nSo it’s nice they though of that. :)<\/p>\n
var gameLoops = {mapRedraw: -1};<\/code> is one of the many object literals (http:\/\/www.w3schools.com\/js\/js_objects.asp<\/a>) of this game. gameLoops<\/code> is in charge of the two intervals that redraw, and shuffle the map. They will look like this:
\ngameLoops.mapRedraw = setInterval(gameRedrawMap, redrawInt);
\ngameLoops.mapShuffle = setInterval(gameShuffleMap, changeInt);<\/code>
\nThis will take place in a function called gameStartMapRedraw()<\/code>, which I’ll walk you through in a moment…<\/p>\n
var gameTileSize<\/code> = the size of the tile in both width<\/code> and height<\/code>, for easy changing.<\/p>\n
var gameCurrentMap;<\/code> Is another object that will keep all the maps properties (set in gameLoadMap(...)<\/code>). Tiles, width, and height.
\nFor example: gameCurrentMap = {map: tiles, width: mapWidth, height: mapHeight};<\/code><\/p>\n
The interval values – at what rate the tiles change, and the map redraws:
\nvar changeInt = 30;
\nvar redrawInt = 50;<\/code><\/p>\n
var shouldCenterMap<\/code> = boolean. Should the map be centered or not. True<\/code> is centered, false<\/code> not.<\/p>\n
Moving on to the functions, the first one is gameLoadMap(tiles, mapWidth, mapHeight)<\/code><\/p>\n
<\/p>\n
\n
\/\/this is what gets called to start everything<\/span>\r\nfunction<\/span> gameLoadMap(tiles, mapWidth, mapHeight) {\r\n\t\/\/Using a Container for this: http:\/\/createjs.com\/Docs\/EaselJS\/classes\/Container.html<\/span>\r\n\tvar<\/span> gamemc =<\/span> new<\/span> createjs.Container();\/\/new createjs.MovieClip();<\/span>\r\n\tgameCurrentMap =<\/span> {map:<\/span> tiles, width:<\/span> mapWidth, height:<\/span> mapHeight};\r\n\t\/\/<\/span>\r\n\t_stage.addChild(gamemc);\r\n\tgamemc.name =<\/span> "gamemc"<\/span>;\r\n\tgameTileParent =<\/span> gamemc;\r\n\t\/\/<\/span>\r\n\tgameStartMapRedraw();\r\n}\r\n<\/pre>\n<\/div>\n
This is what gets called (in init()<\/code>) to create the map. In creates the container gameTileParent<\/code> (var gamemc<\/code>) on _stage<\/code>. As well as setting the current maps properties (according to what you pass to it later, in init()<\/code>).
\nThen it starts the redrawing gameStartMapRedraw();<\/code>
\ngameStartMapRedraw<\/code> is a simple function that starts our intervals (as part of the gameLoops<\/code> object).<\/p>\n
<\/p>\n
\n
function<\/span> gameStartMapRedraw() {\r\n\tif<\/span> (gameLoops.mapRedraw ==<\/span> -<\/span>1<\/span>) {\r\n\t\tgameLoops.mapRedraw =<\/span> setInterval(gameRedrawMap, redrawInt);\r\n\t\tgameLoops.mapShuffle =<\/span> setInterval(gameShuffleMap, changeInt);\r\n\t}\r\n}\r\n<\/pre>\n<\/div>\n
Called in the gameRedrawMap()<\/code> interval (which I’ll get to), gameRenderTile<\/code> creates a new tile if none exist (if (tile.mc == null)<\/code>).
\nEverything else, after that, manages updates (if relocated since last redraw).<\/p>\n
<\/p>\n
\n
function<\/span> gameRenderTile(tile) {\r\n\t\/\/ Create totally new tile<\/span>\r\n\tif<\/span> (tile.mc ==<\/span> null<\/span>) {\r\n\t\t\/\/<\/span>\r\n\t\tvar<\/span> mc =<\/span> new<\/span> tile.tile();\r\n\t\tgameTileParent.addChild(mc);\r\n\t\tmc.name =<\/span> "tile_"<\/span> +<\/span> tile.x +<\/span> "_"<\/span> +<\/span> tile.y;\r\n\t\t\/\/<\/span>\r\n\t\tmc.x =<\/span> tile.x *<\/span> gameTileSize;\r\n\t\tmc.y =<\/span> tile.y *<\/span> gameTileSize;\r\n\t\tmc.stop();\r\n\t\ttile.mc =<\/span> mc;\r\n\t}\r\n\t\/\/ Check if tile relocated since last redraw<\/span>\r\n\telse<\/span>\r\n\t{\r\n\t\tif<\/span> (tile.mc.x !=<\/span> (tile.x *<\/span> gameTileSize) ||<\/span> (tile.mc.y !=<\/span> tile.y *<\/span> gameTileSize))\r\n\t\t{\r\n\t\t\ttile.mc.x =<\/span> tile.x *<\/span> gameTileSize;\r\n\t\t\ttile.mc.y =<\/span> tile.y *<\/span> gameTileSize;\r\n\t\t\ttile.x =<\/span> Math<\/span>.floor(tile.mc.x \/<\/span> gameTileSize);\r\n\t\t\ttile.y =<\/span> Math<\/span>.floor(tile.mc.y \/<\/span> gameTileSize);\r\n\t\t}\r\n\t}\r\n\ttile.mc.stop();\r\n\tif<\/span> (!<\/span>tile.isPlayer) tile.mc.gotoAndStop(tile.opening);\/\/if it's not the player, then...<\/span>\r\n}\r\n<\/pre>\n<\/div>\n
Now, gameRedrawMap()<\/code>. This is called in the interval (gameLoops.mapRedraw<\/code>).
\ngameRedrawMap()<\/code> updates the entire map, saves it (see the loop).
\nThe loop gathers all the gameCurrentMap.map<\/code> tiles and then calls gameRenderTile(tile)<\/code> on them.
\nThus the map is redrawn.
\nThe map is centered, and also playerCheckTile();<\/code> is called, incase the player is on a deadly tile.
\nThis keeps the player from idling on a deadly tile.<\/p>\n
<\/p>\n
\n
function<\/span> gameRedrawMap() {\r\n\t\/\/Update the entire map - save it<\/span>\r\n\t\/\/this called in an interval<\/span>\r\n\t\/\/loop through the map, gather all the tiles<\/span>\r\n\t\/\/update them, which takes place in gameRenderTile again<\/span>\r\n\t\/\/also centers map and checks if player is on deadly tile (so he doesn't idle on one)<\/span>\r\n\t\/\/<\/span>\r\n\tvar<\/span> tile =<\/span> null<\/span>;\r\n\tvar<\/span> player =<\/span> null<\/span>;\r\n\t\/\/<\/span>\r\n\tfor<\/span> (var<\/span> a =<\/span> 0<\/span>; a !=<\/span> gameCurrentMap.map.length; ++<\/span>a) {\r\n\t\ttile =<\/span> gameCurrentMap.map[a];\r\n\t\tgameRenderTile(tile);\r\n\t}\r\n\tcenterMap();\r\n\t\/\/checked here and in keyboard so he doesn't idle on a deadly tile<\/span>\r\n\tplayerCheckTile();\r\n}\r\n<\/pre>\n<\/div>\n
centerMap()<\/code> is fairly self explanatory. It just takes the entire gameTileParent<\/code> container and sets the x, y to center of stage.<\/p>\n
<\/p>\n
\n
\/\/center the map - called in the gameRedrawMap interval<\/span>\r\nfunction<\/span> centerMap(){\r\n\tif<\/span>(shouldCenterMap ==<\/span> true<\/span>){\r\n\t\tgameTileParent.x =<\/span> Math<\/span>.floor((stageWidth \/<\/span> 2<\/span>) -<\/span> (containerWidth \/<\/span> 2<\/span>)) -<\/span> 100<\/span>;\r\n\t\tgameTileParent.y =<\/span> Math<\/span>.floor((stageHeight \/<\/span> 2<\/span>) -<\/span> (containerHeight \/<\/span> 2<\/span>)) -<\/span>50<\/span>;\t\/\/-50 added to pull it up a bit<\/span>\r\n\t};\r\n};\r\n<\/pre>\n<\/div>\n
One very important function here is gameMakeTile(symbol, tx, ty)<\/code>.
\nThis is called twice in this game (init()<\/code> and in playerMake()<\/code>).
\nBasically whenever you create a new tile, this will set the tiles properties.
\ntile:symbol<\/code> = the type
\nx:tx, y:tx<\/code> = placement
\nopening<\/code> = frame to play<\/p>\n
<\/p>\n
\n
\/\/responsible for setting the tile's properties...<\/span>\r\n\/\/called in any init function - twice in init() & in playerMake()<\/span>\r\n\/\/tile:symbol = the type, x:tx, y:tx = placement, opening = frame to play<\/span>\r\nfunction<\/span> gameMakeTile(symbol, tx, ty) {\r\n\treturn<\/span> {tile:<\/span>symbol, x:<\/span>tx, y:<\/span>ty, opening:<\/span>(Math<\/span>.round(Math<\/span>.random()))};\r\n}\r\n<\/pre>\n<\/div>\n
Note that when you add a movieclip \/ addChild<\/code> to stage (with code), we all know that we need a linkage identifier. That’s when you go to properties>actionscript>export for actionscript<\/code>. In this case (HTML5 document), that is disabled.
\nThe only workaround I was able to find was to manually add a copy of all desired addChild<\/code> to the stage (second frame – there’s a note).
\nAfter that you can reference them by the name they have in the library.
\nExample:
\n<\/p>\n
\n
var<\/span> myMC =<\/span> new<\/span> lib.LINKAGE();\r\nthis<\/span>.addChild(myMC);\/\/myMC is added to stage!<\/span>\r\n<\/pre>\n<\/div>\n
So, back to the engine, if I wanted to add a copy of Exit I would specify lib.Exit<\/code> as the symbol:
\ngameMakeTile(lib.Exit, ExitX, ExitY);<\/code>
\nOr lib.Player<\/code>, lib.Memory<\/code>…<\/p>\n
And finally we have our very last function gameShuffleMap()<\/code> which is also called in the interval (gameLoops.mapRedraw<\/code>).
\nThis changes the graphical state of a tile (Memory tile), to either “deadly”, or “walkable”.
\nIt should never<\/em> change under the player. That’s what while (tile1.isPlayer || (tile1.x == player.x && tile1.y == player.y)<\/code>) is for. If it’s under the player, then try again.
\nThe tile1.opening<\/code> at the end sets it to one of the 3 states.<\/p>\n
<\/p>\n
\n
\/\/Change the graphical state of a tile (if it should be "deadly" or "walkable"), but not under player<\/span>\r\nfunction<\/span> gameShuffleMap() {\r\n\tvar<\/span> tile1 =<\/span> gameCurrentMap.map[(Math<\/span>.floor(Math<\/span>.random() *<\/span> gameCurrentMap.map.length +<\/span> 1<\/span>)-<\/span>1<\/span>)];\r\n\t\/\/No changing under player! Do again...<\/span>\r\n\twhile<\/span> (tile1.isPlayer ||<\/span> (tile1.x ==<\/span> player.x &&<\/span> tile1.y ==<\/span> player.y) ) { \/\/now the setInterval for this function is accurate<\/span>\r\n\t\ttile1 =<\/span> gameCurrentMap.map[(Math<\/span>.floor(Math<\/span>.random() *<\/span> gameCurrentMap.map.length +<\/span> 1<\/span>)-<\/span>1<\/span>)];\r\n\t}\r\n\ttile1.opening =<\/span> Math<\/span>.floor(Math<\/span>.random() *<\/span> 3<\/span>);\r\n\t\/\/to test win (no deadly tiles)<\/span>\r\n\t\/\/tile1.opening = Math.floor(Math.random() * 2);<\/span>\r\n}\r\n<\/pre>\n<\/div>\n
Next we have our Player’s control and logic.
\nAgain, starting with the variables…<\/p>\n
<\/p>\n
\n
\/\/\/\/\/\/\/\/\/\/\/<\/span>\r\n\/\/ Player control and render logic<\/span>\r\n\/\/\/\/\/\/\/\/\/\/<\/span>\r\n\r\n\/\/ dr = Direction as string: up, down, left, right<\/span>\r\n\/\/ I left this in from the touchscreen controls version<\/span>\r\n\/\/ This is here incase touchscreen controls are added back in<\/span>\r\n\/\/ Each touchscreen button would set dir...<\/span>\r\n\/\/ Keyboard now uses it as well.<\/span>\r\nvar<\/span> dr =<\/span> ""<\/span>; \r\nvar<\/span> player; \/\/Object<\/span>\r\nvar<\/span> playerCurrentTile =<\/span> null<\/span>; \/\/Object -- so keyboard knows if player can go there, or if it will kill player<\/span>\r\n<\/pre>\n<\/div>\n
var dir = \"\";<\/code> Is a direction string. Up, down, left, and right. This was left in from the touchscreen controls version of the game. It’s here incase touchscreen support is added back (I have it as an App in the App Store<\/a> incase you’re interested :) ).
\nEach touchscreen button would set a dir<\/code>. Keyboard now uses it as well. So essentially this online version could support both.<\/p>\n
var player;<\/code> Is the player! As an object, because properties are saved\/set when player is created in playerMake(symbol, px, py)<\/code>. Explained bellow.<\/p>\n
var playerCurrentTile;<\/code> Is the current tile the player is on. Used in keyboard movement (see if player can move to the next tile). Set in the keyup event.<\/p>\n
The first thing will be the function for making the player, playerMake(symbol, px, py);<\/code> This sets the player object to what gameMakeTile(...)<\/code> returns (now you have the basic properties of player). And specify that this tile isPlayer<\/code> (true). Return the player because later we will assign a variable var currPlayer;<\/code> to whatever this returns.<\/p>\n
<\/p>\n
\n
function<\/span> playerMake(symbol, px, py) {\r\n\tplayer =<\/span> gameMakeTile(symbol, px, py);\r\n\tplayer.isPlayer =<\/span> true<\/span>;\r\n\treturn<\/span> player;\r\n}\r\n<\/pre>\n<\/div>\n
We will also have two functions for setting and clearing the keyboard. Easier for killing\/restarting the game.<\/p>\n
<\/p>\n
\n
function<\/span> setKeyboard(){\r\n\t\/\/<\/span>\r\n\tdocument<\/span>.onkeydown =<\/span> playerKeyboardMove;\r\n\tdocument<\/span>.onkeyup =<\/span> playerKeyboardUp;\r\n\t\/\/<\/span>\r\n};\r\n\r\nfunction<\/span> clearKeyboard(){\r\n\tdocument<\/span>.onkeydown =<\/span> null<\/span>;\r\n\tdocument<\/span>.onkeyup =<\/span> null<\/span>;\r\n};\r\n<\/pre>\n<\/div>\n
So now we’ll start with the key up event. There are two functions associated with it.
\nThe first is playerKeyboardUpdate()<\/code>.
\nplayerKeyboardUpdate()<\/code> is called in two areas. The key up event, and in init()<\/code> (to set the starting value of playerCurrentTile<\/code>).
\nThis sets playerCurrentTile<\/code> to the tile the player is on by looping through the game map, and checking if the tile x\/y is equal to player. Once it finds it then set it.
\nplayerKeyboardUpdate()<\/code> isn’t the actual keyboard event, playerKeyboardUp(event)<\/code> (following block) because, if I wanted to add touchscreen controls, I could now reference playerKeyboardUpdate()<\/code> for the touch up event.<\/p>\n
<\/p>\n
\n
\/\/KEY_UP<\/span>\r\nfunction<\/span> playerKeyboardUpdate() {\r\n\t\/\/ Tile player is on right now<\/span>\r\n\tfor<\/span> (var<\/span> i =<\/span> 0<\/span>; i !=<\/span> gameCurrentMap.map.length; ++<\/span>i) {\r\n\t\tif<\/span> (gameCurrentMap.map[i].x ==<\/span> player.x &&<\/span> gameCurrentMap.map[i].y ==<\/span> player.y &&<\/span> gameCurrentMap.map[i] !=<\/span> player) {\r\n\t\t\tplayerCurrentTile =<\/span> gameCurrentMap.map[i];\r\n\t\t\tbreak<\/span>;\r\n\t\t}\r\n\t}\r\n}\r\n<\/pre>\n<\/div>\n
Now to set the actual key up event:<\/p>\n
<\/p>\n
\n
function<\/span> playerKeyboardUp(event){\/\/KeyboardEvent<\/span>\r\n\tplayerKeyboardUpdate();\r\n}\r\n<\/pre>\n<\/div>\n
As usual key down is a lot more elaborate…
\nThe lines that look like: && playerCurrentTile.opening == 1<\/code>
\nKeep the player from walking in a direction that the tile does not allow.
\nNotice the gameTileParent.getChildByName(\"tile_\"+(player.x-1)+\"_\"+player.y) != null<\/code> before that? That will keep the player from walking off the actual game grid, away from the game…
\nSo we have that to keep them on the board.
\nThe last if<\/code> statement (if (dr != \"\")<\/code>) will set the player sprite to face the direction you just pressed.
\nThen we check the tile with playerCheckTile();<\/code> (explained bellow).<\/p>\n
<\/p>\n
\n
\/\/KEY_DOWN<\/span>\r\nfunction<\/span> playerKeyboardMove(e) {\/\/KeyboardEvent<\/span>\r\n\t\/\/<\/span>\r\n\tif<\/span>(!<\/span>e){ var<\/span> e =<\/span> window<\/span>.event; }\r\n\t\/\/var dr = ""; \/\/ Direction: left | up | down | right <\/span>\r\n\tswitch<\/span> (e.keyCode){\r\n\t\tcase<\/span> KEY_LEFT:<\/span>\r\n\t\t\tif<\/span> (gameTileParent.getChildByName("tile_"<\/span>+<\/span>(player.x-<\/span>1<\/span>)+<\/span>"_"<\/span>+<\/span>player.y) !=<\/span> null<\/span>  &&<\/span> playerCurrentTile.opening ==<\/span> 1<\/span>) {\r\n\t\t\t\tplayer.x--<\/span>;\r\n\t\t\t\tdr =<\/span> "left"<\/span>;\r\n\t\t\t\tplaySound("Move1"<\/span>);\r\n\t\t\t}\r\n\t\t\tbreak<\/span>;\r\n\t\tcase<\/span> KEY_UP:<\/span>\r\n\t\t\tif<\/span> (gameTileParent.getChildByName("tile_"<\/span>+<\/span>player.x+<\/span>"_"<\/span>+<\/span>(player.y-<\/span>1<\/span>)) !=<\/span> null<\/span> &&<\/span> playerCurrentTile.opening ==<\/span> 0<\/span>) { \r\n\t\t\t\tplayer.y--<\/span>;\r\n\t\t\t\tdr =<\/span> "up"<\/span>;\r\n\t\t\t\tplaySound("Move2"<\/span>);\r\n\t\t\t}\r\n\t\t\tbreak<\/span>;\r\n\t\tcase<\/span> KEY_RIGHT:<\/span>\r\n\t\t\tif<\/span> (gameTileParent.getChildByName("tile_"<\/span>+<\/span>(player.x+<\/span>1<\/span>)+<\/span>"_"<\/span>+<\/span>player.y) !=<\/span> null<\/span> &&<\/span> playerCurrentTile.opening ==<\/span> 1<\/span>) {\r\n\t\t\t\tplayer.x++<\/span>;\r\n\t\t\t\tdr =<\/span> "right"<\/span>;\r\n\t\t\t\tplaySound("Move2"<\/span>);\r\n\t\t\t}\r\n\t\t\tbreak<\/span>;\r\n\t\tcase<\/span> KEY_DOWN:<\/span>\r\n\t\t\tif<\/span> (gameTileParent.getChildByName("tile_"<\/span>+<\/span>player.x+<\/span>"_"<\/span>+<\/span>(player.y+<\/span>1<\/span>)) !=<\/span> null<\/span> &&<\/span> playerCurrentTile.opening ==<\/span> 0<\/span>) {\r\n\t\t\t\tplayer.y++<\/span>;\r\n\t\t\t\tdr =<\/span> "down"<\/span>;\r\n\t\t\t\tplaySound("Move1"<\/span>);\r\n\t\t\t}\r\n\t\t\tbreak<\/span>;\r\n\t}\r\n\tif<\/span> (dr !=<\/span> ""<\/span>)  {\r\n\t\tplayer.mc.gotoAndStop(dr);\r\n\t}\r\n\tplayerCheckTile();\r\n}\r\n<\/pre>\n<\/div>\n
playerCheckTile()<\/code> checks the tile the player just walked on and determines if the player should explode (die), or bloat with joy (win).
\nThe first condition (dying) is fairly self explanatory. Checks against the timeline position (what frame), and if it’s the “error” tile then die.
\nStarting the game again (calling demoLose();<\/code>) is called at the end of the player’s die animation. There are better ways of doing that, but this was the simplest.<\/p>\n
The win condition checks to see if the player actually made it to exit. Notice the ExitX<\/code>, and ExitY<\/code> variables. We save the x\/y of Exit incase we want to change it, or make it random with every new game. It adds a level of flexibility…
\nAn interesting problem I ran into while porting this was that the player would sometimes freeze on win (the animation does not play, thus the win function does not get called, and you don’t proceed past this point). The issue is random and seems to occur more in Chrome than it does in Firefox (sorry, I know, blaming browsers). I “fixed” this bug by just forcing win with an interval<\/code> (if it goes beyond a certain time) then just call it. I didn’t figure out exactly why this happens and why the win animation does not trigger, but you could probably credit it to the fact that it would be better to just remove the player when you win, and place win animation as a separate added child, and handle the win\/die events purely through code, breaking up the player movieclip. Better restructuring would be necessary… but in this case, good enough!<\/p>\n
<\/p>\n
\n
function<\/span> playerCheckTile(){\r\n\tvar<\/span> currLabel =<\/span> player.mc.getCurrentLabel();\r\n\t\/\/Die condition<\/span>\r\n\tif<\/span> (gameTileParent.getChildByName("tile_"<\/span> +<\/span> player.x +<\/span> "_"<\/span> +<\/span> player.y).timeline.position ==<\/span> 2<\/span>) {\r\n\t\tplayer.mc.gotoAndStop("die"<\/span>);\r\n\t}\r\n\t\/\/Win condition<\/span>\r\n\tif<\/span>(gameTileParent.getChildByName("tile_"<\/span> +<\/span> player.x +<\/span> "_"<\/span> +<\/span> player.y)==<\/span>gameTileParent.getChildByName("tile_"<\/span> +<\/span> ExitX +<\/span> "_"<\/span> +<\/span> ExitY)){\/\/if it's Exit tile: [object Exit]<\/span>\r\n\t\t\/\/Start win failsafe<\/span>\r\n\t\tif<\/span>(currLabel!=<\/span>"win"<\/span>){\r\n\t\t\tclearKeyboard();\r\n\t\t\twinInt =<\/span> setInterval(winInterval,1000<\/span>);\r\n\t\t};\r\n\t\t\/\/default<\/span>\r\n\t\tplayer.mc.gotoAndStop("win"<\/span>);\r\n\t}\r\n}\r\n<\/pre>\n<\/div>\n
Here’s that “win failsafe” just mentioned:<\/p>\n
<\/p>\n
\n
\/\/WIN FAILSAFE:<\/span>\r\n\/\/If the player does not trigger the "win" animation for whatever reason <\/span>\r\n\/\/(problem seems to sometimes occur, and I'm not sure if what it is, or how to recreate it, or if it still exists...)<\/span>\r\n\/\/Countdown wait, and then force demoWin(); if the animation doesn't trigger & call it<\/span>\r\nfunction<\/span> winInterval(){\r\n\twinCnt+=<\/span>1<\/span>;\r\n\tif<\/span>(winCnt><\/span>3<\/span>){\r\n\t\tclearInterval(winInt);\r\n\t\tdemoWin();\r\n\t};\r\n};\r\n<\/pre>\n<\/div>\n
Moving on to starting the game!
\nWe have our variables…<\/p>\n
<\/p>\n
\n
\/\/\/\/\/\/\/\/\/\/\/<\/span>\r\n\/\/ Start<\/span>\r\n\/\/\/\/\/\/\/\/\/\/\/<\/span>\r\n\r\n\/\/The current map's width and height<\/span>\r\nvar<\/span> currMapWidth; \/\/Number<\/span>\r\nvar<\/span> currMapHeight; \/\/Number<\/span>\r\n\/\/To calculate the width and height of the map container (used in centering)<\/span>\r\n\/\/take gameTileSize and multiply by currMapWidth, and currMapHeight<\/span>\r\n\/\/CreateJS does not support .width yet, so this is how I handle it...<\/span>\r\nvar<\/span> containerWidth;\r\nvar<\/span> containerHeight;\r\n\/\/<\/span>\r\nvar<\/span> currMapTiles; \/\/Array<\/span>\r\n\/\/The current "Player" sprite - in this case, the little green guy<\/span>\r\nvar<\/span> currPlayer; \/\/Object<\/span>\r\n\/\/Placement of the Exit<\/span>\r\n\/\/I'm saving this here because location of exit may vary<\/span>\r\n\/\/--Depending on how much you decide to customize this<\/span>\r\nvar<\/span> ExitX;\r\nvar<\/span> ExitY;\r\n\r\n\/\/seconds and tries is your ranking<\/span>\r\n\/\/the player will be congratulated on this at the end<\/span>\r\n\/\/so both variables are set to global scope<\/span>\r\nseconds =<\/span> 0<\/span>;\r\ntries =<\/span> 0<\/span>;\r\n\r\nvar<\/span> timeInt; \/\/uint<\/span>\r\n\/\/Win failsafe (if, for whatever reason, win might not trigger)<\/span>\r\nwinInt =<\/span> 0<\/span>;\r\nvar<\/span> winCnt =<\/span> 0<\/span>;\r\n<\/pre>\n<\/div>\n
var currMapWidth<\/code>, and var currMapHeight;<\/code> are the maps width and height. They’re set in init<\/code>. Values go by a tile basis, so larger numbers mean more tiles.<\/p>\n
var containerWidth<\/code> and var containerHeight;<\/code> are new to this. I calculate the width and height of the map container (used for centering) by taking the gameTileSize<\/code> and multiplying that by currMapWidth<\/code>, or currMapHeight<\/code>. This is necessary because CreateJS does not support .width<\/code> or .height<\/code> yet (a workaround is available here https:\/\/github.com\/ibnYusrat\/Get-Shape-Width-Height-in-EaselJS<\/a> ).<\/p>\n
var currMapTiles;<\/code> Are all the maps tiles. Pushed to with gameMakeTile (currMapTiles.push(gameMakeTile(lib.Exit, ExitX, ExitY));<\/code> for example).<\/p>\n
var currPlayer;<\/code> Is the player object. Updated when the player is created. Example, currPlayer = playerMake(lib.Player, 0, 2);<\/code><\/p>\n
var ExitX;<\/code> and var ExitY;<\/code> are the placement of the exit. So it’s easier to check against and determine if the tile the player is on is the exit. Exit placement may vary (if that behavior was desired).<\/p>\n
For our ranking system we have,
\nseconds = 0;
\ntries = 0;<\/code>
\nWhich will be like the player’s “score” and they are congratulated on it when they win… as well as it being sent to twitter. :)<\/p>\n
And finally,
\nvar timeInt; \/\/uint
\n\/\/Win failsafe (if, for whatever reason, win might not trigger)
\nwinInt = 0;
\nvar winCnt = 0;<\/code>
\nAre the intervals. Time interval is what increments the seconds variable (how long you’ve played before winning).<\/p>\n
The time<\/code> function is a simple one, just incrementing seconds.<\/p>\n
<\/p>\n
\n
\/\/the time interval<\/span>\r\nfunction<\/span> time(){\r\n\tseconds+=<\/span>1<\/span>;\r\n};\r\n<\/pre>\n<\/div>\n
Following that is another miscellaneous function meant for “sloppily” destroying all intervals. This is a safety precaution just incase the interval didn’t get cleared for some reason.<\/p>\n
<\/p>\n
\n
function<\/span> killAllIntervals() {\r\n\t\/\/console.log("killAllIntervals() - murder called");<\/span>\r\n\t\/\/murder<\/span>\r\n\tfor<\/span> (var<\/span> i =<\/span> 0<\/span>; i<<\/span>100<\/span>; i++<\/span>) {\r\n\t\tclearInterval(i);\r\n\t}\r\n}\r\n<\/pre>\n<\/div>\n
Finally, we have init()<\/code>, which starts the game!
\nIt clears any variables (resets them), sets up any necessary values (like the container width\/height), and creates all tiles (player, memory, exit).
\nBoth arrays are first cleared currMapTiles = []<\/code>, before repopulated. For example, all tiles are pushed to the currMapTiles<\/code> array.
\nAfter currMapTiles<\/code> is done being populated with necessary tile information, gameLoadMap(currMapTiles, currMapWidth, currMapHeight);<\/code> is called to start it up.
\nsetKeyboard();<\/code> enables the keyboard controls.
\nAfter the “Spawn” sound is played, the playerKeyboardUpdate()<\/code> is called just to capture the current player position for first run.<\/p>\n
<\/p>\n
\n
function<\/span> init(){\r\n\twinCnt =<\/span> 0<\/span>;\r\n\tdr =<\/span> ""<\/span>;\r\n\tcurrPlayer =<\/span> null<\/span>;\r\n\tgameCurrentMap =<\/span> null<\/span>;\r\n\tcurrMapWidth =<\/span> 7<\/span>;\r\n\tcurrMapHeight =<\/span> 4<\/span>;\r\n\t\/\/<\/span>\r\n\tcontainerWidth =<\/span> gameTileSize*<\/span>currMapWidth;\r\n\tcontainerHeight =<\/span> gameTileSize*<\/span>currMapHeight;\r\n\t\/\/<\/span>\r\n\tcurrMapTiles =<\/span> [];\r\n\tdemoLibrary =<\/span> [];\r\n\t\/\/*Make the Player<\/span>\r\n\tcurrPlayer =<\/span> playerMake(lib.Player, 0<\/span>, 2<\/span>);\r\n\t\/\/<\/span>\r\n\tfor<\/span> (var<\/span> i =<\/span> 0<\/span>; i <=<\/span> currMapWidth; ++<\/span>i) {\r\n\t\tfor<\/span> (var<\/span> j =<\/span> 0<\/span>; j <=<\/span> currMapHeight; ++<\/span>j) {\r\n\t\t\tvar<\/span> chosen =<\/span> Math<\/span>.floor(Math<\/span>.random() *<\/span> 1<\/span>);\r\n\t\t\t--<\/span>chosen;\r\n\t\t\t\/\/*Make the Memory tiles<\/span>\r\n\t\t\tcurrMapTiles.push(gameMakeTile(lib.Memory, i, j));\r\n\t\t}\r\n\t}\r\n\t\/\/Place Exit tile -- in this case at the end of the map<\/span>\r\n\t\/\/First the variables<\/span>\r\n\tExitX =<\/span> currMapWidth+<\/span>1<\/span>;\r\n\tExitY =<\/span> Math<\/span>.floor(currMapHeight\/<\/span>2<\/span>);\r\n\t\/\/*Make the Exit tile<\/span>\r\n\tcurrMapTiles.push(gameMakeTile(lib.Exit, ExitX, ExitY));\r\n\tcurrMapTiles.push(currPlayer);\r\n\tgameLoadMap(currMapTiles, currMapWidth, currMapHeight);\r\n\t\/\/<\/span>\r\n\tshouldCenterMap =<\/span> true<\/span>;\r\n\tsetKeyboard();\r\n\tplaySound("Spawn"<\/span>);\r\n\t\/\/<\/span>\r\n\tplayerKeyboardUpdate();\r\n};\r\n<\/pre>\n<\/div>\n
After init()<\/code> we have uninit()<\/code> which is a bit simpler. It clears the game (removes all children). This is used in demoLose()<\/code> (called in the player’s death animation), and demoWin()<\/code>.<\/p>\n
<\/p>\n
\n
function<\/span> uninit(){\r\n\tshouldCenterMap =<\/span> false<\/span>;\r\n\tclearKeyboard();\r\n\t\/\/<\/span>\r\n\tfor<\/span> (var<\/span> j =<\/span> 0<\/span>; j <<\/span> gameTileParent.numChildren; j++<\/span>){\r\n\t\t  gameTileParent.removeChild(gameTileParent.getChildAt(j));\r\n\t}\r\n\t_stage.removeChild(gameTileParent);\r\n};\r\n<\/pre>\n<\/div>\n
Then we have demoWin<\/code>, and demoLose<\/code>
\ndemoWin<\/code> is kills the entire game. All intervals are cleared, uninit()<\/code> also called, and the default keyboard (other menu keyboard) restarted.
\nThis sends the timeline to the “win” scene.<\/p>\n
<\/p>\n
\n
\/\/Scope of win, and lose has been changed to be global<\/span>\r\n\/\/They are called within the demo player - at the end of its respective animation<\/span>\r\ndemoWin =<\/span> function<\/span>() {\r\n\tclearInterval(gameLoops.mapRedraw);\r\n\tclearInterval(gameLoops.mapShuffle);\r\n\tclearInterval(timeInt);\r\n\tclearInterval(winInt);\r\n\tkillAllIntervals();\r\n\tuninit();\r\n\taddDefaultKeys();\/\/start the default keyboard again<\/span>\r\n\t\/\/go to win!<\/span>\r\n\tselectedMenuItem =<\/span> "win"<\/span>;\r\n\ttransition();\r\n}\r\n<\/pre>\n<\/div>\n
demoLose()<\/code> simply increments the player’s tries, uninit();<\/code>, and starts the game again, init();<\/code>.<\/p>\n
<\/p>\n
\n
demoLose =<\/span> function<\/span>() {\r\n\ttries+=<\/span>1<\/span>;\r\n\tuninit();\r\n\tinit();\r\n}\r\n<\/pre>\n<\/div>\n
Then finally we start the game with the following.<\/p>\n
<\/p>\n
\n
removeDefaultKeys();\/\/remove default keyboard<\/span>\r\ninit();\r\ntimeInt =<\/span> setInterval(time,1000<\/span>);\r\n<\/pre>\n<\/div>\n
That’s it! The game is running.<\/p>\n
\"\"<\/p>\n
*************<\/p>\n
CONCLUSION<\/strong><\/p>\n
After having worked with this feature of Flash CC I’m impressed. It’s a lot more flexible\/powerful than it’s given credit, and I’m excited to see where Adobe will be taking it in the future.
\nI hope it’s going to grow in future versions\/releases, as I think it’s silly to separate Flash from HTML5 when the two could (potentially) work so well together (Flash is still superior when it comes to handling vector graphics<\/a>).<\/p>\n
Download all sourcefiles here, and take a look:
\nhttp:\/\/nathalielawhead.com\/sourcefiles\/Haxatron2000\/HTML5\/<\/a><\/p>\n
You can play the end result here:
\nhttp:\/\/haxatron.alienmelon.com\/browserhax<\/a><\/p>\n
Visit the PREVIOUS tutorial: Building A Game In Edge Animate (Offender)<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Introduction: Flash Professional CC introduced a document type in which you can create an HTML5 Canvas document. It publishes HTML5 content using the CreateJS libraries (but you could easily use other libraries if you wanted to). Although this feature has been out for a while, there is little to no information (at least I couldn’t find much), about how to make something more complex in it (like a game). I love this development because (from Adobe documentation) “Flash publishes to HTML5 by leveraging the Canvas API. It translates objects created on stage in to their Canvas counterparts.” Meaning, I don’t...<\/p>\n","protected":false},"author":1,"featured_media":4522,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"","fifu_image_alt":"","footnotes":"","_links_to":"","_links_to_target":""},"categories":[30,12],"tags":[],"class_list":["post-3095","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-games","category-resources"],"_links":{"self":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/3095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/comments?post=3095"}],"version-history":[{"count":20,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/3095\/revisions"}],"predecessor-version":[{"id":3119,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/posts\/3095\/revisions\/3119"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/media\/4522"}],"wp:attachment":[{"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/media?parent=3095"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/categories?post=3095"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nathalielawhead.com\/candybox\/wp-json\/wp\/v2\/tags?post=3095"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}