Site Chooser

JavaScript + Canvas Playing

Phew!

This month has been *busy*, but I’ve got round to doing a little bit of JavaScript coding and have made the super-rudimentary 2d platformer a mere pretty-rudimentary one.

It’s only a test of scrolling about in an environment, and nothing particularly impressive yet – but it’s a start. I intend to expand this further so it’s a proper functioning game, with parallaxed backgrounds, animated foregrounds and – oh – some bad guys and a “win” mechanic.

For now it’s just a demo really.

But I thought I’d share it with you anyway 🙂

Click here to “Play”

Pat

Posted on Fri 17 May in Coding,Creative,Game with No Comments

PlayStation Plus: Where’ve You BEEN All My Life?

Morning!

Do you have a PS3?
Do you like games?
Do you want to play more games for game research purposes, pure entertainment purposes or both?

WELL NOW YOU CAN.

…obviously. It’s a PS3.

What is, however, particularly cool is their PlayStation Plus subscription service. You’re probably aware of this already, but if, like me, you needed someone else to tell you what it is and why you need it (thanks Matt!), allow me to describe it:

You pay a yearly subscription of £29.99. Whilst you’re subscribed, you can get the following* full games for free :

  • BioShock 2
  • Guardians of Middle-Earth
  • Mortal Combat
  • Knytt Underground
  • Big Sky Infinity
  • Limbo
  • Ratchet & Clank: All 4 One
  • Cubixx HD
  • LittleBigPlanet 2
  • MotorStorm Apocalypse
  • Infamous 2

When taking into account the upfront cost, that’s an average of £2.73 per game.

Oh and there are lots of other free bits and pieces, plus exclusive trials and lots of discounts too. All for £29.99.

Why the hell had I not signed up to this before??

Well, I have now, and it’s going to be invaluable to have free (well, at no additional cost) access to a whole raft of games to test and enjoy, which will of course inform my own game development activities in future. Plus allow me to excuse entire evenings of battling Big Sisters as “research”.

Huzzah!

Pat

* At present. The list alters over time, mind.

Posted on Sat 05 Jan in Game,Thoughts with No Comments

Ernie Elf’s Christmas Message – now on Mobile!

Hello ho ho!

Well, after another couple of days of festive fun and (far to much) food I sat down and decided I’d update Ernie Elf’s Christmas Message so that it worked on iOS (and Android) devices.

Previously, it only supported movement using the Left and Right keys on a keyboard, meaning iOS (and Android) devices were rather out of luck. In fact, it was worse than that: the initial introduction screen required a Space key press to close and start the game.

Today I decided to fix that:

  • To start the game, you tap the screen.
  • To move Ernie Elf, you tilt your device to the left and right.

Simple! And reasonably easy to play, as you can see here:

But don’t just take my word for it: pick up your iOS (or Android (Ice Cream Sandwich or above!)) device and play here:

play-christmas-game-no-keyboard

What I Did

I worked on this witha mixture of Internet research and trial and error to understand how the accelerometer worked. I developed a simple Accelerometer Test, which uses the combination of the x and y accelerometers plus orientation to determine how far left/right the screen is tilted in relation to the current orientation.

I then integrated this code into the game, using the output to determine Ernie’s horizontal (based on current orientation) velocity.

How To Do It

(A.k.a. The way I did it… this is in no way an endorsement, but might give you some ideas. 🙂 )

Define Global Variables
The first thing to do is to create some global variables that store a) our final value used to move our hero and b) interim orientation values used to calculate the final value:

/* Our end result variable - the Left/Right accelerometer value used to move our hero!*/
var accel = 0;
// Flag to determine if our device is "upside down"
var upsideDown = false;
// Flag to determine if our device is in landscape or portrait mode
var landscapeOrientation = false;

Orientation: Define Event Listener
Then we create a JavaScript event listener to react to changes in the device’s orientation (i.e. react when the device is turned from portrait to landscape or vice versa). We’ll be using this when determining our “horizontal” speed later:

window.onorientationchange = function() { orientationChanged(); };

Orientation: Create Event Handler Function
Now we create the orientation changing handler function “orientationChanged”. This checks the angle of orientation passed to the browser by the device, which is always -90, 0, 90 or 180:

function orientationChanged() {
/* Let's look at the device orientation passed to the browser and set variables based on its value:*/
switch(window.orientation) {
case 90:
// It's landscape mode and "upside down".
upsideDown = true;
landscapeOrientation = true;
break;
case -90:
// It's landscape mode and the "right way up".
upsideDown = false;
landscapeOrientation = true;
break;
case 180:
// It's portrait mode and "upside down".
upsideDown = true;
landscapeOrientation = false;
break;
default:
// It's portrait mode and the "right way up".
upsideDown = false;
landscapeOrientation = false;
break;
}
}

(The actual code I’ve used is more efficient, but the code shown here’s a bit easier to read).

Accelerometer: Define Event Listener
Ok, so we’ve got our orientation sorted – now we need to take a look at the accelerometer to see in fine detail the amount device is rotated by on its various axes. First we create an event listener to respond to the accelerometer and call an appropriate handler function:

window.addEventListener( 'devicemotion', onDeviceMotion, false );

Accelerometer: Create Event Handler Function
Finally we create the accelerometer updating handler function “orientationChanged”. This’ll allow us to determine our final “horizontal speed”, stored in the “accel” variable:

function onDeviceMotion() {
// Grab the accelerometer values
var accelX = event.accelerationIncludingGravity.x;
var accelY = event.accelerationIncludingGravity.y;
var accelZ = event.accelerationIncludingGravity.z;
/* If we're in landscape mode, set our final accel value to that of the Y accelerometer - otherwise, if in portrait, set accel to that of the X accelerometer. */
accel = (landscapeOrientation) ? accelY : accelX;
/* If we're upside down, reverse the horizontal "direction" of our final accel value. If we don't do this, our character will move in the opposite direction to that desired when our device is upside down. */
if (upsideDown) accel *= -1;
}

The result of this function is that our final variable, “accel”, will reflect how much we’ve tilted our device left and right based on the current orientation. We use this variable in moving our character, so that if we tilt left, accel’s value is negative so our character moves left, and vice-versa for right/positive.

Event Listener Declaration: Ordering
As a final note, when declaring the orientation and accelerometer event handlers, we should manually call the orientation event handling function before setting the accelerometer event handler. This means we’ll’ve correctly set the orientation variables (used by the accelerometer event handler function) without the user needing to rotate their device first:

window.onorientationchange = function() { orientationChanged(); };
orientationChanged(); // Manually call it!
window.addEventListener( 'devicemotion', onDeviceMotion, false );

Android Angst

You’ll notice I’ve been putting Android in brackets when mentioned. That’s because I’m not 100% sure it’s going to work as intended.

For a start, this only works on Android 4.0 (Ice Cream Sandwich) and above, as that’s when Google adopted the native browser accelerometer functionality introduced previously in iOS 4.0.

Also, on a Samsung Galaxy S2 this was tested on the angles reported by the orientationchange event appear to be 180 degrees out from iOS. This means that the “upsideDown” flag is set incorrectly at all times and so Ernie moves in the opposite direction to that which he should! Eek.

To fix this I’ve added a simple Android OS check and said “If it’s Android, then inverse Ernie’s direction”. It’s dirty, but it works. At least on an S2.

I’ve not got an ICS+ Android device to directly test this on (I’ve been remotely testing by hassling my mate Reef (thanks Reef!!) and didn’t want to drive her insane 🙂 ), and it looks like it might be different on different devices from what I read on Stackoverflow. Fun!

If you’ve any idea why iOS and Android (well, ICS on an S2) are reporting their orientation angles with what seems like a 180 degree difference, please let me know!

Anyway… it’s alive on iOS and Android! Wooh!

UPDATE (28/12/2012 13:57): I’ve added touch-based movement functionality for Android-only OSes of less than 4.0 – so you can now play this on Android < 4.0. When you play, you'll see two big translucent buttons on the left and right of the screen. Touch them to move Ernie! Pat P.S. Big thanks to Gary for his extensive testing help on iPad and iPhone and Reef for her remote testing on the S2!

Posted on Fri 28 Dec in Coding,Creative,Game with No Comments

A Christmas Card Game

Hi and a Happy Festive Season to you!

I hope you’ve had a great Christmas and managed to avoid eating quite as much as I have (did someone say “January detox”? No? Just my conscience? Ah…).

I thought I’d share with you a little game I made for friends and family to say “HAPPY CHRISTMAS” at this time of year:

play-christmas-game

How to Play It

You need to move Ernie Elf left and right along a platform, in order to catch falling letters. Each letter you collect is added to a special festive message written along the bottom of the screen. Avoid the bombs or you have to start again!

Some Thoughts on Making the Game…

Before I set off on this project over the weekend, I wanted to make sure I created a cross between an eCard and a simple computer game. Something which:

  • Was fun
  • Was simple
  • Looked cute
  • Felt festive
  • Could be personalised

I also wanted to make something purely using JavaScript, so I could build on what I’d learned and developed at Seb Lee-Deslisle’s brilliant CreativeJS workshop last week and really get comfortable doing HTML5 games.

So that’s what I set out to do. The graphics were all drawn in Illustrator using my trusty Wacom Cintiq to create a hand-drawn yet vectorised/cute feel to them before exporting out to PNG/JPEG. The sounds were, uh, improvised by me (with apologies and thanks to Chris Rea). The code was 100% JavaScript. No Flash to be seen on this occasion, which was quite daunting, but really quite interesting!

I built on a number of the things learned on the CreativeJS course, but the key elements were the particle systems I created to generate the snow effect and the falling/caught snow balls / bombs. I performed some funky text-string-to-object-array manipulation to create the snow balls / letters, plus various object states and a “waiting to fall” array (thanks Seb for the tip!) to easily manage those snow balls caught, falling and neither falling or caught.

The text-string-to-object-array code allowed me to easily edit the letters in the snow balls being collected just by editing a single string variable. This meant I could easily make special versions for family members, which was a key intention in the first place. In fact, I went as far as adding a sneaky bit of PHP so that the JavaScript code never had to be altered. I’m such a nerd.

Graphics-wise, there were various smoothing/easing techniques used to make sure everything on screen always had a fluid/smooth feel to it – I wanted it to feel “alive”:

  • When the bomb blows up, each on-screen snowball jettisons to the top of the screen (rather than just vanishing).
  • When a snow ball is caught, it “slides” into place in the message at the bottom.
  • When all snow balls are caught, they slide to the top half of the screen and the background smoothly moves down to reveal the sky.
  • The snow balls gently sway once caught, using some simple yet effective Sine wave calculations.
  • Ernie Elf has a smooth bobbing motion as he’s moved across the screen, again using Sine/Cosine waves.

I’ll be talking more about the use of Sine/Cosine in making pleasant movements in a future post. It’ll be about platforms. There will be trig. Bring a bean bag.

And sounds? Urrrrgh, sounds:

The sounds use the basic HTML5 Audio class, and works in IE/FF/Chrome at least. HTML5 audio is a mess, so it probably won’t work everywhere (what sort of class returns “Maybe” or “Probably” when being asked “Do you support this audio format?”. Clearly a standardised audio codec/format is FAR too much to ask.).

Well, that was a LOT of random waffling and not much detail. But don’t worry: in future, I’ll be talking more about specific cool things in terms of game coding, development and theory.

But for now I’m going to go back to nursing my food-baby.

Happy Chrimbo Time and I hope you enjoyed the game!

Toodles,

FPat

Posted on Thu 27 Dec in Coding,Creative,Game with Comment (1)

Creative JS!

Helloooo!

What a couple of days. I’ve been absorbing more about JavaScript and HTML5 than a code sponge living on the great data carrier reef *.

By which I mean: I’ve learned a lot. And made some COOL things!

For I’ve just finished a 2 day training course named Creative JS. Run by the excellent Seb Lee-Delisle, he showed the group of us how to make a huge range of cool things within a web browser and some pretty awesome techniques in order to do so. It was a practical course, so we were coding and testing as we went – being taught whilst developing is definitely the way to go.

I’ve learned loads, from HTML canvas tricks and tips through 3D and vector techniques to some funky trig.

I’m going to be using what I’ve learned to transfer my Flash-based games into HTML5, meaning I’ll be able to have them played on everyone’s favourite restricted mobile operating system (no, not Symbian. The other one.)!

Without further ado, to give you an idea of some of the bits we were making, below are are a couple of examples. Both are based on code we developed during the course (and using some handy libraries created by Seb and built upon by yours truly):

Swirly Particle Thing!

A moving, bouncing, colour-changing and exploding Catherine wheel type thing – I thought I’d make something that brought back memories of Windows screensavers from the mid 00’s. I don’t quite know why. 🙂

swirly

Asteroids!

A nice and simple Asteroids game, with funky particle-based explosions. Up = Thrusters, Left/Right = Rotate, Space = Fire bullets.

asteroids

Cool, huh?

(I hope to God those didn’t just set your browser on fire)

Pat

* I tried to think of something that sounded techie and also a bit like “Great Barrier Reef”. This was the result. The summary? I shouldn’t blog when I’m tired.

Posted on Wed 19 Dec in Animation,Coding,Creative,Education,Game with Comments (2)

Improving – and Speed Running – Quibble’s Quest

websitepngYo yo!

Since completing the initial version of Quibble’s Quest (that which got me the award to the right. Did I mention the award? Am I starting to sound like a big headed moron now? Yes? Ah. Er… I have a lot to learn still! How’s that? Better? Not enough? Still sounded big headed? Er… ABANDON PARENTHESES!) I’ve been doing further testing on (a.k.a. playing) it, and collecting feedback from those who’ve been playing it.

I’m planning on getting the game into a well-presented, bug-free state so I can consider it done – or at least ready for later expansion. I’m getting there!

Improvements Since The Original

Bugs Fixed

  • When the player is standing on the edge of a moving platform, when a platform changes direction the player can fall off.
  • When the player dies, bullets remain on screen after “rebirth”.
  • Timer reset visible after level fade-in.
  • Some background graphic highlights appear in front of the player.

UI Enhancements

  • “Press Esc to Pause” tip displayed on screen, to show player how the pause menu can be displayed

Learning Curve Enhancements

  • Added a “You need to destroy all baddies” pop up message if player walks in front of exit without destroying all baddies first (note: doesn’t stop play).
  • Added a “All baddies destroyed! Now find the exit” pop up message once all baddies destroyed (note: doesn’t stop play).
  • Increased length of particular tricky platforms on all levels (and repositioned one baddy branch on level 3 to align it vertically with a player branch).
  • Increased time allocation for Bronze and Silver awards.

Graphical Enhancements

  • Level 3 graphics dramatically improved (although work still required).
  • Level 2 graphics improved (added additional BG to create more visual interest).
  • Animated / better looking water graphics (tinted per level to represent water / lava / mud).
  • Consistent exit door graphic used across levels (and “Exit” logo displayed above door).
  • Replaced grey circle with a thumbs up blue “coin” for level completion outside Bronze/Silver/Gold timings.

Plenty more to do, but it’s a big improvement on the original release!

Speed Run!

My friend Steve from FCE didn’t believe that I was able to complete each of the 3 levels in under 20 seconds. He demanded proof. So I gave him just that. In a very low quality video:

Play it Yourself!

I believe that the second level is completable in less than 18 seconds… but can you do it?

adobeGamePhoto

Toodles,

Pat

Posted on Mon 17 Dec in Creative,Fun,Game,Video with No Comments

Games Design Award: A Week Later

Hello!

Firstly, my apologies for the delay in this blog post. My hosting provider (UK2) had a major data corruption issue last week, which left my site down for several days. Fortunately all is good now (touch wood) so it should (touch wood) stay stable (touch wood) from now on (touch wood).

Touch wood.

Secondly, alongside placing my hands on bark, I’ve been rather cheery in my demeanour following last week’s Adobe Games Design Course award. Here, finally, is my post talking all about it.

What Was The Course?

Twas as a 10 week online course, run by Adobe, to teach people how to create games (using Adobe Flash). In summary, it was really good. Am I biased? Well, yes, but I was thinking this prior to last week’s events, OK? Good. 🙂

Each week there was live session online with the course leaders, featuring game theory, game programming tutorials and a weekly speaker from the games industry. It gave a great insight into the principles behind making great computer games, what it’s like to actually work in the games industry (and the various paths to get into it), plus how to design and develop our own games.

During the 10 weeks, we were given a weekly assignment to incrementally develop a particular game (“RoboCat”), designed by course leader Mark Shufflebottom.

Each week we were given the opportunity to add to what Mark had guided us through (I won a weekly award based on my redesign of the look and feel of the game), and then at the end of the course we had to create our own game – based largely or in part on the RoboCat game.

The result of three days of solid game development was Quibble’s Quest: a scrolling platformer / shooter around 3 levels, with the object being to destroy all baddies on a level and get to the exit in the lowest possible time.

You can read more about the game in this previous post.

What Was The Award For?

The award was for Overall Excellence (Over 19 (only just, mind…)) in the Adobe Generation Games Design course, based on my final game! I was absolutely chuffed and surprised by this, as the quality of the other games was damned good!

It was based on various categories, to quote course leader Roxana Hadad:

“The three categories of Aesthetics, Playability, and Outcome/Resolve were scored on a scale of 0-3. In addition to the rubric, we also considered what kind of innovative departure each of you took from the RoboCat template”

I’m thrilled to have won!

websitepng
What Did You Win?

Well, aside from the warm feeling I also won a PS3 (!!) and £500 worth of Adobe Creative Cloud membership (!!!)! Plus it’s a rather tasty item to add to the CV. Oh and of course, I won the ability to put the tasty logo to the right on my site. 🙂

Where Is This Game?

The latest version is playable here (more details on what’s changed in it since the awards on a future blog post).

What Next?

Well, following winning this award I am going to take the bull by the horns and focus on getting my skills and experience in games increased, alongside my portfolio. Next steps include redeveloping this website you’re looking at to better reflect this, learning lots of technical things (today and tomorrow I’m on the Creative JS course, run by the excellent Seb Lee-Delisle) and creating many more games (I have something for Christmas planned).

2013 is going to be the year I fully get into gaming, and I can’t wait 🙂

Toodles,

Pat

Posted on Mon 17 Dec in Award,Creative,Fun,Game,Work with No Comments

Fingers Crossed!

Hi There!

Hope you’ve had a good week. I’ve had a busy but productive one, doing a mixture of Uni research, some Secret Audiobook Project ™ work, some personal branding work and learning “on the job” about infographics! Oh and a birthday. More to show on all of these soon (aside from the last one).

In other exciting news, I had an email from Adobe stating the following:

"We've been busy umming and aahing and now we've decided – you've been shortlisted for an Adobe Generation Award! Congratulations, you're now one step closer to picking up a great prize!"

This is all to do with my Adobe Games Design final submission.

I’m now very excited, as you can imagine! Should be awesome for the CV if I get this – not to mention the Creative Could Membership prize and PS3 – as I’ve been seriously considering a move towards gaming in terms of my career (gonna be massively expanding on Quibble’s Quest over Christmas).

Fingers are very much crossed.

The awards are announced on the Awards Ceremony at 7pm on Monday. You can watch it live here or check back on this blog just after that for either a lot of CAPITALISED EXCITEMENT or small, lower case humility.

Toodles,

Pat

Posted on Fri 07 Dec in Creative,Game with No Comments

Adobe Game: The Submitted Final

Hello!

Well, that was a VERY long couple of days.

Yes, for the past couple of day I have shut myself in my flat and worked pretty much solidly on designing and developing my final project for the excellent Adobe Generation Games Design course (which you really, really ought to sign up to next year if you’re into computer games).

The result – aside from a slightly paler complexion and a desperate need to stop staring at a laptop screen – is a simple, 3 level platform game based loosely on the “RoboCat” game we’d been working on during the course.

I’ll explain more behind the thinking of it after I hand it over to you to have a play:

(It’s in Flash, so you iOS types are out of luck until I’m persuaded to port this to JavaScript 🙂 )

Considerations When Developing

Despite the relative lack of time (I found out that the deadline was brought forward earlier this week) I wanted to make sure the game I made followed some basic principles:

Challenging

  • A simple mechanic and gradual increase in difficulty across levels allows the player to get to grips with the game mechanics before things get more difficult; platform sizes decrease in line with a baddy increase as the player progresses through levels.
  • Time rankings on each level provides the player with a secondary challenge: beat their best time, and get a gold time medal!

Enjoyable

  • The character responds quickly and simply to the player’s commands, and the simple mechanic allows for a simple “pick up and play” approach to the game.
  • The player is immersed in the game through the depth created through parallax scrolling, movable platforms and baddies, and sound effects.
  • The player can choose the pace at which they view the introduction, thus preventing them having to sit through long introduction timings each time – they can skip through or watch if they want.

Replayable

  • Once any level is complete, the player can come back to it to improve on their previous best time – and to get the “Gold” ranking for each.
  • Best times / rankings are remembered between sessions (using Flash’s SharedObject storage) to further aid replayability.

Finally, I wanted to expand upon what I’d been taught in the course, so researched and experimented with things such as moving baddies, parallax scrolled environments and long-term storing of scores. I think it’s all worked pretty well in the end!

I’ve plenty of things I want to do that I didn’t get a chance to – such as some graphical glitch fixes and better graphics in general (particularly with the Forest level), more baddy / platform types and a huge number of additional levels – and I might well get around to that if there’s demand for it!

But given the time available and the fact it’s my first ever platform game (since the single screen pixelly awesomeness of QBasic-based Squage 2 in 1995) I’m pretty pleased with the result! Excitingly, the first prize is a PS3 and £500 of Adobe Cloud membership… I’m really, really hoping they really, really like what I’ve done!

What do you reckon?

Cheers,

Pat

Posted on Sat 01 Dec in Creative,Fun,Game with No Comments

Adobe Games Design Course – A Nice Surprise!

Well hello there!

Long time no speak, for which I apologise. Things here have been a whole new level of manic, what with a metric tonne of University work (in hindsight I regret printing my work on lead blocks), lots of freelance design / development work, various social bits and pieces and also some learning projects on the side. Evidence of such things will be appearing the coming weeks!

In the midst of this, I managed to actually achieve something pretty cool – I won last week’s Adobe Generation Game Design weekly award! We’re making a simple platform game, a little each week, based on the brilliant and well explained tutorials on the course.

I decided to move away from the standard look and feel, plus add a few extras in, both of which resulted in my winning the weekly award. I went from this:

To this:

All the flowers bop from side to side, and the clouds bounce up and down too, creating a real “kids game” feel to the game. I also included some splash animations / sounds for when our hero falls from a platform into the (added by me) water. I’ve also added some animations to our character at the start/end of the level.

Awesomely, the prize was a pair of Adobe-branded in-ear headphones, which have come just at the right time as I’m about to get back on the streets and run… to lose a metric tonne of weight (in hindsight I regret eating pizzas made of lead blocks).

Anyway, here’s the work-in-progress game as of a few days ago:

I’ll be doing lots of more fun things with this before the course is over… but more on that soon!

Right, back to my head cold. Huzzah!

Pat

Posted on Sat 24 Nov in Creative,Game with Comments (2)

Browse

Follow

My blog runs on Wordpress, which uses cookies. By using my blog, you are consenting to this. Find out more

The cookie settings on this blog are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Further details on Wordpress's use of cookies is shown here.

Close