Pardon the mess, Play My Code is in beta!

READY TO PLAY?
CLICK TO LOG IN!

sign up - lost password

Read Our Blog!

News, updates and more from the world of Play My Code. Keep informed, follow @playmycode on Twitter or subscribe via RSS.

Updates: Touch Controls, API Additions, Teacher’s Notes, New Compiler and More

Posted: by Seb under Play My Code Announcements

Apologies for not posting for so long: we’ve been very busy working on a whole host of improvements and additions to Play My Code. Not to mention we’ve been presenting some talks about PMC, are preparing to open source some of our underlying tech, have some teacher’s notes to share and much more. Full details below…

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.

3 comments

Guardian Coverage, Play My Code Stickers, Global Game Jam and More

Posted: by Seb under Play My Code Announcements

Play My Code Stickers

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.

one comment

Updates: New Front Page, Painter Fixes, and API Additions

Posted: by Joe under Play My Code Announcements

We very recently rolled out a Play My Code update featuring additions to the API, keyboard shortcuts for our integrated paint application SkyBrush, a refreshed front page and a whole range of other bugfixes and tweaks. Read on for details…

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.

3 comments

Play My Code in Education?

Posted: by Seb under Play My Code Announcements

It would seem that 2012 is shaping up to be a year of programming hitting mainstream education in the UK, with the Raspberry Pi finally gearing up for release and Michael Gove’s recent announcement that computer science will replace the useless ICT curriculum, under which the British bedroom coding tradition of the 1980s practically withered up and died. But pleasantly surprising is that Play My Code – a project conceived initially as little more than an easy way to make browser-based games – seems to be becoming a part of this.

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:

Extracts from Year 7 Computing lesson “Play My Code” @playmycode (mp3)

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.

10 comments

Huge Update: Painter, Full Screen IDE, Optimisations and More

Posted: by Seb under Play My Code Announcements

Hello! We’re back, with a major addition to Play My Code which cements its position as a one-stop-shop for browser game creation, as well as a usual collection of slightly more minor language refinements, bugfixes and optimisations.

Integrated Painting Application

Play My Code 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.

Continue reading

no comments yet

Updates: Forking & Copying, Experiments Section, Language Improvements and More

Posted: by Seb under Play My Code Announcements

Our latest update is out and ready, including project copying & forking, a new Experiments section intended for demo and test projects, plus language additions & improvements as well as a round of under-the-hood improvements.

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.

Continue reading

no comments yet

Update: API Additions, Bug Fixes

Posted: by Joe under Play My Code Announcements

Following our last major release, we’ve rolled out an incremental update which includes a few handy API additions we didn’t have time to get out the door last time ’round, as well as some extra polish and a number of bug fixes.

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.

no comments yet

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.

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.

Continue reading

no comments yet

Updates: Game Descriptions and Bug Fixes

Posted: by Seb under Play My Code Announcements

A small yet very important update for you all this week: we’ve finally implemented game descriptions into Play My Code. On your Build page you will notice that the “Rename” button alongside any and all of your games has now become “Details”, and in here you can enter a description for your games.

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…

no comments yet

Building a Game Mainloop in JavaScript

Posted: by Joe under Game Development

HTML5 is being touted as the next technology for browser games, but even common and straight forward parts like a ‘mainloop’ can be difficult to write in JavaScript.

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();
    }

Continue reading

4 comments