Experimental Touch Controls Added

We’ve begun adding touch controls to Play My Code. Currently an experimental feature, a single touch is available which emulates the mouse- but even at this early stage, most mouse-driven PMC games are now playable on an iPad or iPhone, including Wacky Cannon, Oroubo Ware, Spike Dislike, Colourbreak and many more. Merely adding mouse controls should make your game touch compatible, so long as you don’t rely on the mouse buttons too much!

We’re also working on touch equivalents for button presses, multitouch and more, whilst hopefully we’ll get it working on Android at some point too (thanks krakatomato for testing this for us!). Meanwhile, we’ll also have some documentation and perhaps even a tutorial post about adding touch soon.

Play My Code at Mobile Monday & Hydrahack

Recently we gave two show & tells about Play My Code, the first taking place at Mobile Monday Birmingham on Monday 30th April at Faraday Wharf, Birmingham Science Park. We gave a talk about PMC in general in front of an audience of 130 developers, entrepreneurs and general industry types before revealing Play My Code’s added touch functionality, mere hours after its implementation. Those who are interested can find some photos from the event here.

Our second talk was slightly more informal, yet no less exciting: taking place at Hydrahack, a meetup for Birmingham web developers. We demoed PMC’s features, and even live-coded and released a small demo to showcase the ease Play My Code offers in terms of both development and deployment. Again, find some photos right here.

Play My Code Intro Notes for Teachers

Tim Scratcherd of the School House Partnership was kind enough to share some notes he’d put together which provide an intro to Play My Code for teachers who might be new to PMC, or even computer science in general. Centred around our Bombs ‘n’ Booty tutorial, the notes provide general introduction and guidance plus code samples intended for educators. If you’re a teacher currently using PMC in the classroom then please check them out, and do get in touch should you need any help or advice.

API Additions

We’ve made a few minor additions to the Play My Code API.

First off, String.toInt() and String.toNumber() are functions which make converting numeric strings easier. As you might guess, toInt() will only return a whole number, whilst toNumber() will return either whole or decimal numbers and also works with hexadecimal.

String.split() is a function which splits a string into an array. A given separator is used to determine where to split the string.

Finally, Array.includes() returns true if an array contains a given element.

Click the respective function, above, to read more details about it in the docs.

Play My Code Player Improvements

You may or may not have noticed that we’ve buffed and shined the Play My Code game player: games can now be shared on Facebook and Twitter straight from the menu bar. Check it out, let us know what you think, and get sharing.

Coming Soon: New Compiler

A lot of our time over the last few months has gone into into rebuilding our language compiler. It’s not yet quite complete, but the worst is behind us. The current compiler uses a library called JS/CC- excellent for getting our language built quickly, but over time it’s ended up holding us back. Adding new syntax is somewhere between difficult and nightmarish, but the new compiler addresses this- making it easier for us to add improvements. Once it’s in expect to see modules, mixins and other improvements finally cropping up.

A change that users will also see straight away is that syntax error messages are drastically improved!

Open Sourcing

We recently open sourced SkyBrush, the painting app which features as part of our IDE. We use a lot of open source technology here, so we’d like to give back to the community and offer up some of the cool things we’ve been building. Go checkout SkyBrush on GitHub if you want a painting application for your own site.

After SkyBrush, we also plan to open source our Quby language, plus the parser building library too. We’ve had a lot of people asking about using it for scripting in their own projects, as there aren’t many languages out there which compile to JS while offering sandboxing. We will announce when a stable version is online, so watch this space.

Finally, for those of you who do web development: we have a complete PHP MVC framework that we built for PMC, called Flexi. We built it as it allows us to do more with less code – and less configuration – than some of the other (still awesome) frameworks out there. Just like our other tools, there is no reason why we should be the only ones taking advantage of this.

Anyway, til next time… Follow @playmycode on Twitter for the very latest news.

We’ve had an extremely busy couple of weeks, to say the least… Here’s some details on what we’ve been up to:

Play My Code Mentioned on Guardian Newspaper Site

We were mentioned on the website of popular UK broadsheet paper The Guardian, in a piece written by the fantastic @teknoteacher. The article, a list of useful resources for teaching computer science, is an interesting read for anyone regardless of whether you’re a teacher, student, hacker or whatever- so go check it out. It’s an absolute honour to be mentioned in the same breath as the Royal Christmas Lectures, Twitter and the National Museum of Computing.

Want a Play My Code Sticker?

We’ve had some gorgeous die-cut vinyl stickers done (see above picture), and we want you to have one too. If you’d like one then drop us a line- either email hello@playmycode.com, or send us a tweet and we’ll stick one in the post to you, absolutely free. Move quickly, stock is becoming quite scarce now!

Play My Code at Global Game Jam

We spent most of last weekend at Millennium Point in Birmingham, developing a game for Global Game Jam 2012 based around the (slightly bizarre) theme of Ouroboros, the serpent which symbolises the perpetual cycle of life, death and rebirth. Our response to this brief was Ourobo Ware, a WarioWare-inspired microgame collection themed around snakes, most of which want to swallow their own tails in one way or another, and we won a prize too! As of writing, our game has clocked up almost 1000 plays since it went live- play it below if you’ve not already.

Play My Code at Hack to the Future

We will be attending Hack to the Future on Saturday February 18th, a BarCamp-style programming event for children which takes place at Our Lady’s High School, Preston. We’ll be manning a Play My Code zone, offering support to kids who’re just starting out with programming. Come say hi if you’re going!

Play My Code on Google Plus & Elsewhere

Play My Code Users on Google Plus: we’ve set up a page for PMC, add it to your circles! Don’t forget also that we’re on both Facebook and Twitter.

Anyway, that’s about it for the time being- we’re currently working hard on an update to Play My Code, so watch this space.

API Additions

Mouse Pressed & Key Raised

Long-time member Giorgio suggested we add more methods for detecting the precise state of the mouse and keyboard. These come in the form of isLeftPressed, isMiddlePressed, isRightPressed and isKeyReleased, and allow more precise control over how you detect user interaction. Click into each one for full details on how they work.

setTransform & transform functions

Requested by Krakatomato following his recent (excellent) 3D engine building experiment, we’ve added setTransform and transform functions.

Also, check out just one of his wonderful demos below- find more in our experiments section.

setTransform and transform are both intended for advanced users, and they allow manipulation of the ‘transformation matrix’ used when drawing- this is what allows you to rotate, skew or scale graphics. setTransform replaces the current matrix, whilst transform applies the given matrix against the current matrix. Not to worry if you don’t understand this- it’s relatively advanced stuff.

SkyBrush Keyboard Shortcuts

As well as a range of bugfixes, we’ve spent a considerable amount of time adding keyboard shortcuts to SkyBrush, our (recently rebranded) integrated painting app. You can now switch to any tool using the keyboard, which makes life much easier for more experienced users.

The colour picker can be accessed by holding down the alt key, and some tools now have an alternate command through holding shift- for example, the zoom tool will zoom in the opposite direction, the pencil and brush will switch to the eraser, rectangles and circles will toggle between drawing outline or filled, and the line will change between smooth and pixelated.

You can find a full list of the shortcuts right here. Incidentally, SkyBrush was recently accepted as a Chrome Experiment!

We hope everyone likes the new changes, more will be coming from Play My Code over the rest of the year. Do please keep in touch via the forum or @playmycode on Twitter- we love hearing your suggestions and take note of every last scrap of feedback we receive.

Today, Preston-based Computer Science teacher Alan O’Donohoe (aka @teknoteacher) absolutely made our month by releasing some recordings of his pupils’ experiences of using PMC:

The implication seems to be that children especially enjoy hacking, forking and modifying code to see what makes it tick, with the suggestion that the user is “allowed” to do this on Play My Code being particularly profound in a world which some might argue is rapidly being closed off as far as open computing is concerned. I might be so bold as to compare it to when I was young, breaking open my toys to see what was inside. (PS, we’ll be getting search in there as soon as we can guys!)

We should also mention that @teknoteacher is involved in organising Hack to the Future – a Barcamp-style event aimed at children who want to learn programming – which takes place at Our Lady’s High School in Preston on February 11th. More details here, apparently there are still limited tickets left for groups of pupils.

Meanwhile, BBC researcher @sparks_rd warmed our hearts with the following tweet: “Well, @playmycode passes the ‘can they (8 & 9 year olds) just get on and make games test’. Will be making some tutorials over xmas methinks” (link to tweet). The prospect of our site being used as a learning tool by minds so young and inquisitive is genuinely amazing, and the fact that young kids  are taking to it so easily certainly reassures us that PMC is as easy to use as we intended.

Finally, the slightly more mysterious Curtos has also been using Play My Code as a teaching aid, having created a basic yet nicely-written, fully commented Pong game for his class of high schoolers. Do check it out if you’re learning the ropes, as it’s a very good example with plenty of room to take things further- fork it and see what you can do. In fact, this was used as the basis of another of @teknoteacher’s lessons:

All of this has left us wondering: what is Play My Code, and where do we take things from here? We originally intended to create a “YouTube of games” of sorts, and rather short-sightedly never even considered the possibility of it being used as an educational tool. We’ll certainly be thinking about the direction things will be taking from here on in.

One thing we do know is: if you’re reading this, are an educator and are interested in using Play My Code as part of your class, please do get in touch via Twitter, the forum or just drop me a line at seb@playmycode.com- we would be both thrilled & honoured to offer any help and support we can.

Integrated Painting Application

Play My Code’s suite of tools now includes a full, integrated art package for creating and editing assets, meaning those of you not lucky enough to have access to decent graphic tools can now create assets directly in your browser.

The art package – known simply as ‘Painter’ – is fully-featured and comes with a variety of graphic tools including brushes, primitive shapes, undo/redo and zoom, whilst assets of any dimensions can be created and edited.

Painter can be found in the IDE, via the assets pane- you should notice the addition of a New button next to the existing image upload tools, whilst there are also controls to edit any uploaded assets. Once inside, you can create, edit and save assets to your heart’s content. The tools should be pretty familiar to anyone who’s used a basic art package, plus don’t forget you can try the IDE and Painter without even signing up for an account.

We hope you find this new addition useful and inspirational. We intend to keep adding & refining features over time, and would love to know your thoughts- please leave any feedback, problems and suggestions in this forum thread right here.

Fullscreen IDE

We’ve made a much-requested improvement to our IDE: the code area now expands, to fill the otherwise empty space at the sides on large monitors. Hopefully writing code should now feel a bit less claustrophobic.

Play My Code on Facebook

Play My Code now has a Facebook page, at http://www.facebook.com/playmycode. Check it out & give us a like!

API Additions

As usual, we’ve made a number of additions & refinements to the API.

Easier 2D Arrays

As requested on our forums, we’ve made some changes to the way 2D arrays are created. It’s now as easy as this:

grid = new Array( width, height )

Array.fill

A new fill method for the array, to replace all, or just some, of the elements already contained within the array. It can also be useful for padding an array out with a new element.

ns = [ 1, 2, 3, 4, 5 ]
ns.fill( 6 )

// prints out [ 6, 6, 6, 6, 6 ]
console( ns )

Find more info about arrays in the Array Class documentation.

Blocks for Mouse Click & Down

When you check if the mouse button is clicked or down, it’s common to also want to check the mouse location. To make this a little easier, you can now attach a block onto isLeftClick, isMiddleClick, isRightClick, isLeftDown, isMiddleDown and isRightDown. In all cases, the block is only called if the method would return true (if the mouse is clicked or down), and passes the mouse x and y location into the block.

/* Moves the player to the current mouse location,
 * when the mouse button is down. */
getControls().isLeftDown() do |x, y|
    player.setLocation( x, y )
end

More information about everything to do with mouse control can be found in the Controls Class documentation.

controls.getMouseXY

You can now retrieve the mouse x &amp y location using a block, via the getMouseXY method:

getControls().getMouseXY() do |x, y|
    // use the x and y location here
end

More info about this can be found here.

Optimisations

Play My Code is quicker than ever before, thanks to a load of optimisations and improvements. Amongst other improvements, image tinting is now around 6 times faster than it was before, whilst speed has improved across the board when playing PMC games in Google Chrome.

That’s about it for now: as ever, feel free to drop us a line if you have any feedback or suggestions on the above or any other aspect of Play My Code. Leave a comment on this post, drop us a line via the forums or send a tweet to @playmycode on Twitter. See you soon, and happy coding!

Forking & Copying Projects

First off, Play My Code projects can now be copied and forked; highly-requested features useful not just for those who like to build multiple games from a common codebase (such as Jayenkai) but also for users who like to modify and extend the creations of others.

Copying works pretty much as one might imagine: clicking the Copy button (found alongside any of your projects on the My Games page) will create a new copy of that project – code, assets and all. ‘Forking’ refers to the copying of projects written by others, enabling users to create their own version of someone else’s code to modify as they see fit. The Fork button can be found underneath any game on the site. Currently, any project on Play My Code can be forked, but those worried about their work being “ripped off” should be pleased to know that the original source is quoted on a forked project.

Experiments Section

Play My Code is primarily built for creating and sharing games, the intention being to create the world’s biggest user-generated gaming portal – however, lots of users write tests, demos and experimental code which doesn’t really fit in with the “finished” titles one currently finds on the Play page. Currently there’s no way to easily browse through these projects, so we’ve added an Experiments section to the Play page which will enable experimental projects to gain more recognition.

This ties into project forking too – users may find an effect or test which they wish to study or use in their own game. To enable your code to appear in the Experiments section, set it as “Experiment” from the drop-down menu on the My Games page. The Experiment category replaces the Demo category, so any project currently previously set as Demo will appear in the Experiments section automatically.

new Array( size )

A common case for writing code is to build a new array, pre-initialized with a number of elements. Until now you’ve had to do this yourself, but with this update Arrays now have proper constructors. There are several ways you can use them.

The first way is to just pass in a size when you create an Array, and all elements will be initialized to ‘null’.

// make an Array containing 5 nulls
// old way
arr = [ null, null, null, null, null ]

// new way
arr = new Array( 5 )

What if you don’t want to default each element to ‘null’? You can pass the default value in as the second argument:

// creates the array: [ 0, 0, 0, 0, 0 ]
ns = new Array( 5, 0 )

Finally, you can also attach a block and initialize each element using that, for more advanced cases:

images = new Array( 5 ) do |i|
    return new Image( 'player_animation_' + i + '.png' )
end

Full documentation on Array constructors is available here.

array.random()

Another feature for arrays is the ‘random’ element. This will return a random entry from the array. This is useful for retrieving a random enemy factory, a random image, or some other random value from a collection.

tetrisBlocks = [ squareBlock, iBlock, jBlock,
        lBlock sBlock, tBlock, zBlock ]

nextBlock = tetrisBlocks.random()

You can find documentation about this here.

Multi-line String improvements

We have always supported multi-line strings, using the ‘\n’ character. However, using the enter key has not been supported until now:

text = "A multi line
string that
is spread over
multiple
lines"

Delta Time Improvements

The delta time value retrieved has previously been a little hackish, often jumping around wildly, and sometimes this can mess up games. So we’ve looked at this and added maximum/minimum bounds, so the delta time no longer jumps to extremes. This will make any game currently using delta time much more stable.

getDelta()

We’ve also streamlined how you can work with delta time. Currently, you can get the delta time using the ‘onEachFrame’ function:

onEachFrame() do |delta|
    // pass delta in to other parts of the game
    updatePlayer( delta )
    updateEnemies( delta )
    updateBullets( delta )
end

However, you then need to pass this into any function or method that uses delta time, and this can be annoying. To improve this, we’ve added the getDelta function for retrieving the delta time for the current frame anywhere.

x = x + speedY*getDelta()
    y = y + speedY*getDelta()

This is the same value as the ‘delta’ value you can retrieve from ‘onEachFrame’. Find full documentation here.

multAlpha( alpha )

When using multiple nested ‘setAlpha’ blocks, you often want to have the alpha value depend on the outside one. For example:

setAlpha( fade ) do
    setAlpha( 0.3*getAlpha() ) do
        drawShadows()
    end
    setAlpha( 1*getAlpha() ) do
        drawPlayer()
    end
    setAlpha( 0.8*getAlpha() ) do
        drawHealth()
    end
end

Here, the inner sections will draw at their own alpha values, multiplied against the outer ‘fade’ value, which is retrieved using ‘getAlpha’. To make that a little more terse, ‘multAlpha’ will do that multiplication for you.

setAlpha( fade ) do
    multAlpha( 0.3 ) do
        drawShadows()
    end
    multAlpha( 1 ) do
        drawPlayer()
    end
    multAlpha( 0.8 ) do
        drawHealth()
    end
end

It makes juggling alpha values a little easier. Find the documentation here.

timer.onExpire()

We provide a Timer class to help build animations. It allows you to retrieve a value whilst the timer lives. However, it’s very common that you want to perform an action when the Timer ends, and currently you have to manually check for this and perform the appropriate action yourself. To make this easier, we’ve added the ‘onExpire’ method.

color = :blue

// In 1 second,
// change the colour from blue to red.
t = new Timer( 1000 ).onExpire() do
    color = :red
end

onEachFrame() do
    fill( :black )
    
    setColor( color ) do
        fillRect( 100, 100, 50, 50, true )
    end
end

You can find the documentation for this here. onExpire can also be cancelled, and the method to do this is documented here.

Bugfixes and Tweaks

We’ve made many and various bugfixes, tweaks and optimisations with this release, including:

• If statements are now faster
• Scaling drawRotatedImage() would sometimes crash – fixed
• Some documentation layout bugs fixed
• Some IE9 CSS bugs fixed
• The Number.wrap() method didn’t work under certain circumstances – fixed
• Some Asset Manager corner case bugs have been fixed alongside some subtle tweaks, making it slightly nicer to use
• If .play() is called on a sound which is still playing, it will retrigger it without .stop() needing to be called first
• Number.toString() now works as advertised, rather than returning a string with the value ‘Number’ as it did before
• Error messages in the IDE have been improved
• Opera-specific bug where a crash could occur when manipulating an image’s pixels – fixed

As always, we greatly value your feedback and input when it comes to updates and improvements – leave a comment on this post, send @playmycode a tweet, leave a post on our forum or use the feedback form to drop us a line (find the tab on the left-hand side of the screen) if you’ve got any suggestions or impressions. Happy coding!

Controls Class: getKeysDown() & getKeysPressed()

One can check if a key is down, but what if you want to get the names of the currently pressed keys? The new Controls class methods getKeysDown() and getKeysPressed() make this a snap.

    controls = getControls()

    // an array of keys which are currently down
    down = controls.getKeysDown()
    
    // an array of keys pressed on this frame only
    pressed = controls.getKeysPressed()

Test the new functionality in the demo below (code here):

More info about both of these can be found in the docs: getKeysDown and getKeysPressed. These are perfect if you’re planning on building a typing game!

Number Class: Wrap

Often, you might want to build a game world where going off the side of the screen makes you reappear on the opposite side. You can call this ‘wrapping’ or ‘rolling’ over the edge. Another case when you need to do this: when you want to either add or subtract from an array index, and again have it wrap over either edge so it doesn’t go out of bounds.

Whilst one could use modulus (the % symbol) to ensure values wrap within certain bounds, the wrap method makes this a lot easier to understand and use.

    x = 800
    // x will roll over either edge
    x.wrap( 0, getScreenWidth() )

If the number is less or greater than the range given, than a value which wraps around that range is returned.

Segments & Inner Segments

Finally, we’ve added some more sets of drawing functions, both for drawing to the screen as well as for drawing on images. drawSegment and fillSegment are used for drawing a segment (or sector) of a circle.

We’ve also added drawInnerSegment and fillInnerSegment. These allow you to draw a segment where the inner section is cleared out, like a wide arc. Check out the example below for a demonstration (code here):

As always, if you’ve any suggestions or feedback then do please let us know via our forums, @playmycode on Twitter or via the Feedback tab you’ll find at the top left of this page.

In-IDE Documentation

Developers can now access a reference to the Quby language and Play My Code API, right from the build page IDE- just click the Reference button in the top-right corner on the IDE page. The documentation can be shown and hidden at will without you losing your place, whilst there’s also an Index button providing an easy-to-browse list of sections. We’ve only had the time to implement the Quby and API reference so far, but are looking to improve upon this in the coming months, streamlining it while adding more in the way of general guides and tutorials. Let us know what you think, and what improvements and additions might be useful.

On top of this, we’ve also overhauled the way the language and API reference in the regular Docs section is organised. No longer all dumped onto one page, we’ve broken everything down into neat little individual sections and pages. Not only this, but we’ve rewritten a fair bit of it too, adding examples and in some cases snippets of code which can be copy-pasted and run there and then.

We hope that these changes will make Play My Code more accessible for beginners, as well as more convenient for the more experienced developers out there- again, please do let us know what you think. We’ve begun a thread on our forums regarding the new documentation, so if you find any bugs or errors then please post away.

Game Comments

Registered users can now leave comments and feedback on any game. If you’ve enjoyed a particular title (or perhaps not!), be sure to let the game author know with a comment. On any game’s page you will find a form beneath the game which allows you to post comments. We’ve also got a notification system in the pipeline to inform developers when someone has commented on their game, hopefully this will be present in the next update.

Syntax Error Highlighting

The IDE now features a system which will catch certain syntax errors, highlighting them in red as you type. While it’s not 100% foolproof it will catch obvious errors such as unclosed strings, meaning less frustration and time wasted looking for mistyped characters. We hope it proves useful.

setBlend

One of our more requested additions is the ability to alter how colours are blended. With setBlend, one can now mix colours using additive blending- adding colour to the target rather than merely using the alpha value as the default blending mode does.

It also supports ‘clear’ and ‘stencil’ modes, which are useful for drawing on images. Using these, the standard drawing commands become clear commands. This means anything you can draw to an image (rectangles, circles, lines, polygons or even other images) can also be erased from that image, leaving the area transparent. This is useful for building very complex overlays, such as cloud, fog and darkness effects.

Find more information about setBlend right here.

Timer Class

One of the big issues in games is time. When should a period of time expire (like the time for reloading a gun)? And how do you animate between the start and the end of that period? These are both problems that the Timer class aims to solve.

When you create a Timer object, you pass in how long it will last, in milliseconds. It will start a timer right now, the moment it is created, and will expire once that amount of time has (approximately) passed. How accurate this is depends on your browser.

    // a timer that lasts 2 seconds
    t = new Timer( 2000 )

Calling isExpired allows you to check if the 2 seconds has passed yet, allowing you to decide what to do based on that.

Next, you might want to have an animation between now and when it expires. For this you can get a ‘percent’, which returns how far the duration is along the timer’s lifetime. This is a value from 0.0, to 1.0, and can be retrieved using getPercent (or getPercentLeft for the inverse). In turn, you can multiply this value against locations, colours, alpha values or anything else to create an animation which moves from the beginning to the moment the Timer expires.

    /**
     * Counts down, and then shows the timer expired.
     */
    message = "EXPIRED! Click to Reset."
    t = new Timer( 4000 )
    
    onEachFrame() do |delta|
        fill( :black )
        
        if t.isExpired()
            setColor( :red )
            fillText( message, getScreenWidth()/2, getScreenHeight()/2, true )
            
            if getControls().isLeftClick()
                t.reset()
            end
        else
            setColor( :white ) do
                fillText( t.getDurationLeft(), getScreenWidth()/2, getScreenHeight()/2, true )
            end
        end
    end

Finally, it uses getTime internally – the in-game timer – which you can also use as a low-level alternative to the Timer class. As it’s using the real time, no delta values are required so it will be accurate regardless of the current frame rate. You can also reset timers, allowing you to re-use them.

Min & Max on Sin, Cos and Tan

The Sin, Cos and Tan methods can now take two values as a range for the result to fall between. For example, you might want to have a wave between 0.0 and 1.0 for animating an alpha value; this makes it easier for you. Cos and Tan feature the same functionality.

Lets say you wanted to animate an alpha value, based on a sine wave. Sine waves go from -1.0 to 1.0, and we are moving this to a range of 0.0 to 1.0 (the range for alpha values). Normally, the maths to do this is:

    alpha = 0.5 + 0.5*angle.sin()

The above is quite hacky, and doesn’t express what we are doing. With the new sin method this can be changed to:

    alpha = angle.sin( 0.0, 1.0 )

This clearly shows we want it between a range of 0.0 and 1.0. Further if we want to change this to be a wave between 0.3 and 1.0, then you just update it accordingly:

    alpha = angle.sin( 0.3, 1.0 )

The maths is all handled for you.

Please check out the documentation for more info and examples.

Chainable Image Methods

Image methods are now chainable, in a manner you might be used to if you use jQuery. For example:

img = new Image( 500, 500 )
img.fill( :white ).
        setColor( :pink ).fillRect( 10, 10, 100, 100 ).
        setColor( :red ).fillCircle( 100, 100, 80, true )

You don’t have to go as overboard and chain 5 or more commands right after each other, but this is a useful addition for making those common tasks a little shorter.

Until Next Time…

We’ve always got new features in the pipeline- if there’s something you would like to suggest then please drop us a line. And as always, let us know what you think of our latest update: leave a comment with your thoughts, post a message to our forums, tweet us at @playmycode on Twitter or drop an email to hello@playmycode.com.

This is important, as you can use this not just to flesh out any plot or background for your game but also to provide instructions, eliminating any risk of the player not understanding how to play and thus potentially increasing the amount of exposure your game will receive- no-one wants to play a game they can’t understand, after all.

So, make sure to log in and get your game descriptions filled out and up-to-date – your play count will thank you for it.

API Changes & Bug Fixes

We made a minor change to the API, adding the ability to enter newlines into text. Entering \n into a text string where you want the newline to be will trigger this. We’ve applied a few bug fixes too – isCircleOverlap now works as advertised, drawRoundedRect now centres like it should and the reset password form has been rebuilt as a couple of bugs stopped it from working properly. Apologies to anyone who might have tried, and failed, to reset their password due to this.

As ever, please do bring any bugs you find to our attention via the forums, the feedback tab on the left side of every page, or @playmycode on Twitter. Meanwhile, it’s back to work for us- we’ve got some big new features in the pipeline. Until next time…

This is a thorough explanation of how to go about writing your own, based upon our experiences of building Play My Code. Novice programmers please note: this article applies to JavaScript coding and not to coding using PMC, where we have solved this problem for you already.

Why?

Most games update in one of two ways. The first is to wait for input, like a mouse click, and then update or draw the game based on this. Under this system, the game only updates when a user interacts with it. This works well for card and puzzle games, where it’s normal for nothing to happen for fairly long periods of time.

However most action games, such as a first-person shooters, have to repeatedly update and redraw multiples times a second as they normally contain elements which move and react independently to player input. Essentially:

    while ( true ) {
        updateGame();
        drawGame();
    }

This is often referred to as a game’s ‘mainloop’.

Getting back to JavaScript

The first thing to note is that you cannot do the above in JavaScript, because the script must end in order for the browser to update the page. This includes displaying anything you’ve drawn to the canvas, and allowing the user to interact with the page (and in many cases, the rest of the browser).

So the first step is to break down your mainloop into a function, which will then be called repeatedly.

    var mainloop = function() {
        updateGame();
        drawGame();
    };
    while ( true ) {
        mainloop();
    }

Remove the while loop

Again, to stop the page from locking up, we remove the while loop. The easiest way to achieve this is to use setInterval. Given a function, it will re-call it repeatedly, until we tell it to stop.

    var mainloop = function() {
        updateGame();
        drawGame();
    };
    setInterval( mainloop, ONE_FRAME_TIME );

ONE_FRAME_TIME represents how often the function gets called, and ideally this should be run at 60 frames per second (which matches most refresh rates).

The time is in milliseconds, so to work out the time for one frame we divide 1 second (1000 milliseconds) by 60 frames.

    var ONE_FRAME_TIME = 1000 / 60 ;
    var mainloop = function() {
        updateGame();
        drawGame();
    };
    setInterval( mainloop, ONE_FRAME_TIME );

It works out to be about around 16.666 milliseconds.

More Efficient Looping

However, setInterval is not the most efficient way to build a mainloop. Some modern browsers provide a specialist function that can be used called ‘requestAnimationFrame’. You pass in your function, and the browser will call it later for you.

    var mainloop = function() {
        updateGame();
        drawGame();
    };
    window.requestAnimationFrame( mainloop );

It is more efficient because it is built with animation in mind. The browser will try to call it at the right time- so your changes are shown as soon as possible- and the timing code behind it tries to be more accurate then setInterval, to give a more stable frame rate.

However this is an experimental feature, and is not fully supported in all browsers. So you need to ensure you use the ‘requestAnimationFrame’ version supported by the host browser. You can do this using:

    var mainloop = function() {
        updateGame();
        drawGame();
    };

    var animFrame = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            null ;
    animFrame( mainloop );

It will test for, and return, the first ‘requestAnimationFrame’ version it can find, using each of the browser name prefixes. If they fail, then null is returned. I will solve this issue later.

This Only Calls it Once!

The above code only calls ‘mainloop’ once, not multiple times. To turn it back into a proper loop, we need to call ‘mainloop’ multiple times using ‘animFrame’.

We can achieve this by wrapping it up within a closure, which recursively calls itself.

    var mainloop = function() {
        updateGame();
        drawGame();
    };

    var animFrame = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            null ;

    var recursiveAnim = function() {
        mainloop();
        animFrame( recursiveAnim );
    };

    // start the mainloop
    animFrame( recursiveAnim );

What if animFrame === null ?

If ‘requestAnimationFrame’ is not supported (such as in IE 9), then ‘animFrame’ will be null. In this case, we fall back onto the ‘setInterval’ used earlier.

    var mainloop = function() {
        updateGame();
        drawGame();
    };

    var animFrame = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            null ;

    if ( animFrame !== null ) {
        var recursiveAnim = function() {
            mainloop();
            animFrame( recursiveAnim );
        };

        // start the mainloop
        animFrame( recursiveAnim );
    } else {
        var ONE_FRAME_TIME = 1000.0 / 60.0 ;
        setInterval( mainloop, ONE_FRAME_TIME );
    }

Alternatively, you could also use the technique suggested by Paul Irish, which creates a function that essentially looks like requestAnimationFrame.

WebKit Improvements

That’s all you need for a cross browser mainloop, but you can improve it further. WebKit browsers feature a second parameter, where you pass in the canvas you are going to be drawing to. This allows the browser to only update that one area.

    var mainloop = function() {
        updateGame();
        drawGame();
    };

    var animFrame = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            null ;

    if ( animFrame !== null ) {
        var canvas = $('canvas').get(0);

        var recursiveAnim = function() {
            mainloop();
            animFrame( recursiveAnim, canvas );
        };

        // start the mainloop
        animFrame( recursiveAnim, canvas );
    } else {
        var ONE_FRAME_TIME = 1000.0 / 60.0 ;
        setInterval( mainloop, ONE_FRAME_TIME );
    }

I’ve used jQuery above to grab my canvas element, mainly to keep my example as short as possible. You can replace that with your own JavaScript code.

In Firefox and other non-WebKit browsers, passing in the canvas as the second parameter is simply ignored. It either optimises, or does nothing.

Firefox improvements

There is a second way to call the mainloop in FireFox, by attaching it to the ‘mozBeforePaint’ event. In my personal experience, I find this gives a minor speed-up (about 10 to 60 milliseconds).

So if we are using Firefox, we should use that instead of the recursive code above. To detect for Firefox, again I am just using jQuery.

    var mainloop = function() {
        updateGame();
        drawGame();
    };

    var animFrame = window.requestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.mozRequestAnimationFrame    ||
            window.oRequestAnimationFrame      ||
            window.msRequestAnimationFrame     ||
            null ;

    if ( animFrame !== null ) {
        var canvas = $('canvas').get(0);

        if ( $.browser.mozilla ) {
            var recursiveAnim = function() {
                mainloop();
                animFrame();
            };

            // setup for multiple calls
            window.addEventListener("MozBeforePaint", recursiveAnim, false);

            // start the mainloop
            animFrame();
        } else {
            var recursiveAnim = function() {
                mainloop();
                animFrame( recursiveAnim, canvas );
            };

            // start the mainloop
            animFrame( recursiveAnim, canvas );
        }
    } else {
        var ONE_FRAME_TIME = 1000.0 / 60.0 ;
        setInterval( mainloop, ONE_FRAME_TIME );
    }

Now, in Firefox, when ‘animFrame’ is called it tells the browser to repaint. It then then runs the ‘MozBeforePaint’ event, where our mainloop sits.

Alternatively

This is what it takes to achieve a proper mainloop across browsers. Cross-browser issues like these are what Play My Code helps to solve, by handling these details for you under the hood. So, alternatively you could just build your game here, and save yourself a great deal of time and trouble.