Updates: In-API Docs, Game Comments, New API Features and Much More

Posted: by Seb under Play My Code Announcements

Following a huge amount of work, we’ve just rolled out one of our biggest updates yet: taking in an overhauled docs system, game comments, API additions & improvements and much more.

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.


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()
            setColor( :white ) do
                fillText( t.getDurationLeft(), getScreenWidth()/2, getScreenHeight()/2, true )

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.

Leave a Response

Your email address will not be published. Required fields are marked *