FiveSprites

What? Why? Eh? Shush!

2013-03-21T20:33:00.000Z

I'm not entirely sure what's going on at PlayMyCode, but the site has gone very quiet lately. There's been a few good games appear, but most of them just end up getting hidden in a torrent of awfulness.

I have a few games and projects that are almost ready for release there, but technical problems hold me back. For example, the performance of Array is AWFUL! It's so slow that creating and using tilemaps is painful. When you need to access various parts of the tilemap arrays for rendering and collisions, you really do start to chug along.

The blog on PlayMyCode has gone almost a year without an update. The recommended games section is never updated. The forums are full of useless posts or people moaning about the lack of updates to PMC.

I'm sure things will improve, but for now, my favourite test bed for ideas has changed. I'm now playing around with Loom which is just lovely - and you can easily deploy to iOS/Android/HTML5 etc. It's quite new so has a few quirks, but certainly looks promising.

Expect some Loom goodies soon :)

Additive Blend Editor Pt. 4

2012-12-12T08:57:00.000Z

I've been busy with work lately, but managed to get a minor update done to the editor:

Layers now working correctly
Basic animation support
Select/copy functionality complete

Next up is separating the main editor window to enable images to be easily viewed in different sizes along with spritesheet support. Once I'm happy with that I'll finish the animation code and add a few more tools.

Port to PlayMyCode of Notch's Minecraft 4kjs demo

2012-12-04T20:20:00.001Z

Direct port to PlayMyCode of Notch's wonderful Minecraft 4k Javascript/HTML5 demo.
Warning: This version runs incredibly slowly! I've asked the PlayMyCode developers for help in finding the issue, so hopefully it will run speedily soon :)

The Wigglers

2012-11-05T13:32:00.001Z

I seem to have this thing for tentacles lately, so here's another tentacle type demo on PlayMyCode.com :)

Another tentacle demo

2012-10-14T13:59:00.000+01:00

Another quick demo. Based on the tentacles from my ITopia experiment.

Quick Old School Demo

2012-10-14T13:08:00.001+01:00

Bored this morning, so knocked up a quick old school demo-scene thing with added spikes for good measure ;)

If it runs a little slow for you, then jump to the edit page for the above demo and click Run - for some reason it runs a bit quicker in there.

Also, try adjusting some of the parameters - reducing NUMSEGMENTS will speed it up quite a bit.

PayPal Warning!

2012-10-09T21:21:00.001+01:00

I normally refrain from any sort of personal blogging etc, but I felt it necessary to inform others of what just happened to me as it may possibly impact them.

Do PayPal, or possibly Domino's Pizza Online (UK) have a security issue?

So today I ordered a pizza using Domino's (UK) online website. We've used it a fair few times and have almost always paid using PayPal (yes, I know - boo me, but it's easier than re-entering credit card details).

We chose the pizza, clicked order and went through to the PayPal site, logged in and then clicked on Pay Now. As I did, I glanced at the delivery address and something struck me - it wasn't right! Too late though, the order had gone through!

At this stage I was incredibly concerned and immediately logged into my PayPal account. To my horror, the transaction appeared showing some bizarre address in Ireland! I checked my account profile and addresses - no such address linked with my account and no other strange or worrying activity. Hmm. I immediately changed my password just in case.

Once done, I went back to the Domino's website and tried another transaction - but this time, instead of hitting Pay Now on the PayPal screen, I took a screenshot:

Again, the very same, and COMPLETELY UNKNOWN TO ME, address appeared!

And here's the snapshot from my PayPal account page for the pizza I ordered:

So as you can see, the delivery address went through as this odd one.

I called Domino's to confirm the delivery address - they assured me that the address they use is the one on their system - not the one from PayPal. All good (and the pizza did arrive on time - and was quite yummy!).

However, the issue still remains - who the hell is this Andy bloke and what's this strange address?

Let me just record this here: I know only one person in Ireland and they live nowhere near Navan - and they have nothing to do with my PayPal account, nor have I ever sent anything to them (outside of a Christmas card!).

So, I called PayPal. They were very approachable and clearly understood my concerns. They confirmed that the address was recorded in their system as a "gift address". I had no idea at the time what a "gift address" was so the operator explained. In simple terms, when you make a purchase you can have the item sent to an address that's not your own, say for example sending a present to a friend.

Pretty strange for a pizza purchase. PayPal then checked my account history and could see that this gift address was created on 27th September and was associated with another Domino's pizza we ordered that day (did I say we like pizza?). Even stranger! And then a clanger - this gift address was created at the same time as that order, from the same PC that placed the order! WHAT?

At this point I was a little dumbstruck - I couldn't possibly fathom how this could occur.

The PayPal operator was also curious, particularly as this gift address wasn't visible in my account profile - the only address recorded is my own home address. Their concern was that I may have had a virus, and that my virus checker was maybe very out of date or hadn't run recently.

Nope and nope and nope on that account. The PC used is a work laptop, belonging to a large corporate company. The security software on there is always up-to-date and is always running (I have no control over it - it's a corporate enforced thing). So I'm pretty flipping sure it's as secure as possible.

PayPal recommended I delete the gift address - well, I can't as it doesn't appear in my profile! They could see it, but I certainly couldn't (bit of a warning sign there for a start!). So, they duly deleted it for me, and that was pretty much the end of the call.

Only afterwards did the fully gravity of this hit me - if I'd made some major purchase for something and not really paid much attention to the delivery address - would it have been delivered to this place in Ireland?

So I sat and thought on it for a short while and it occurred to me:

Why does this apparent "gift" address appear for any transaction I put through PayPal - even when it's clearly not a giftable transaction!
Why can I not see this gift address in my profile - anywhere?
If PayPal are stating that this address was recorded as a Gift Address then how did that happen? You can't associate a pizza purchase from your local Domino's to a PayPal gift address! Nor is there any way of doing so on the payment confirmation screen. So how the hell could a gift address appear?
Now, a quick Google of the above address, or at least some of it, reveals a curious thing - Navan was "apparently" one of the proposed locations for PayPal's base in Ireland - promising hundreds of jobs. This was never to be the case and PayPal ended up based in Dundalk. Probably me reading more into this than there is, but hey - some people were clearly upset about that decision:

http://www.meathchronicle.ie/news/roundup/articles/2012/03/07/4009385-navan-was-never-in-race-for-paypal-jobs-county-manager

http://www.meathchronicle.ie/news/navan/articles/2011/12/14/4008114-war-of-words-follows-paypals-rejection-of-navan/

http://newsandsport.ie/leads/read/items/answers-sought-over-paypals-navan-snub

makes you wonder if there's somebody inside PayPal that holds a grudge? Who knows!
I guess another possibility is there's an issue with Domino's - could there be an issue with their system that's causing this bizarre address to appear? Sounds less likely to me.

I do apologise to the person(s) living at this address in Ireland. They may be completely innocent in this - and could potentially be receiving many items that they never expected or paid for! I'm pretty certain they'd be shocked at the arrival of a pizza from a knackered looking delivery driver who's come all the way from Surrey in England!

So please, if you have a PayPal account and use it to pay for anything online - double check the postal address before hitting "Pay Now"!

If you've also purchased anything recently, please check your PayPal confirmation emails, or log into PayPal and check the history.

I'm going to send this same post to UK Police for them to investigate, and to PayPal and Domino's for comment. I'll post an update if I receive any reply.

And off I go to have a beer and watch some TV, safe in the knowledge that my PayPal account is secure. Or is it?

Additive Blend Editor Pt 3

2012-10-03T20:12:00.001+01:00

A little more work on the editor today:

Now able to save the project (useful feature!)
Save a selection of the display as an image/sprite
Copy a selection of the display to create a new brush (also saved to disk for future use)
Building the GUI up a little more
Introduced layers (although still not happy with the result yet)

Also started work on a selection tool - picking one or more "points" that you've placed so you can alter/move/delete - but oh my! Is that an interesting problem to solve! When each point is an image that can have varying differences including scale/angle you can end up with big bounding boxes that don't reflect the point you're choosing. There's also the issue of selecting the correct point when there's a lot of points available in one area - no idea how to address this yet :)

Few more tweaks/fixes and I'll start to use it for generating real game sprites :)

If anybody's interested in trying this tool out then feel free to let me know.

Additive Blend Editor Pt 2

2012-10-01T18:04:00.002+01:00

Managed to find a little free time to work on the Additive Blend Editor. I've moved away from it being available on PlayMyCode and instead written it for Windows/OSX/Linux. This decision was mainly due to the inability to save your work anywhere.

A few hours work and we've got a very basic GUI under way and most of the basic tools:

Long ways to go yet, but the basics are there and working. The idea is to allow you to save to a .png and/or an XML data file which you can then use to render the same designs in your game.

There's also scribbled down ideas for animation, but that's not too high on the priority list.

If you've got any suggestions then please leave a comment.

Indie dev grant - get on it!

2012-09-08T21:05:00.000+01:00

Ok, here's a thing...

http://www.kyttarogames.com/?p=220

If you're an indie and looking for funding to help you get your game finished then you should read the above and apply - you never know, it could be you receiving a potentially large chunk of cash to help you out!

The grant is tied to the Bundle in a Box and for every 15,000 bundles sold $2000.00 will be added to the grant. The lucky dev will walk away with all of the grant money - no strings attached.

So yeah, if you need it - read it, get on it and good luck!

Still here!

2012-08-24T13:54:00.005+01:00

Oops! Been a little while since I updated this blog. Hopefully there will be something interesting appearing soon :)

Asteroids

2012-05-28T12:21:00.000+01:00

A version of the Atari classic Asteroids built using PlayMyCode.

Click on the image to play, or on the PlayMyCode banner to take you to the game, and source code.

Enjoy :)

Arrow keys to move, Z to fire and X or Space to perform a Hyperspace Jump!

Back to 3D

2012-05-14T14:19:00.002+01:00

Having received a Raspberry Pi the other day I found myself digging around retro games. In particular, I was playing with the original Elite and figured it would be fun to try and create a 3D space game using PlayMyCode.

I'd already created a very basic 3D renderer for PMC (see earlier posts), so I was able to take this and improve it quite quickly:

This is a simple model of the Adder ship from Elite. The 3D engine now supports lights (for which this scene has a single global light at the moment). I've also added texture support, though not fully functional as I need context.clip() support in PMC which isn't yet available.

The colours I've chosen above are intentional and temporary - I'll choose much better colours eventually!

There's no clipping in the engine yet, so that's next up along with a simple particle system for engine effects :)

EDIT:

Hmm - so I tried having 20 of the Adder ships flying around and performance was horrific! FPS dropped down to 15FPS which is nowhere near good enough - and that's without clipping :(

Time to dig through the code looking at ways to optimise it, or this project will end up dead in the water (or is that space!)

Ok, so it turns out the lighting is eating up all the time! Turned it off for now until I can find a cheaper solution :(

Procedurally Generated Caves Redux

2012-05-08T22:55:00.000+01:00

Looking back over some of my older projects that needed some tidying up or finishing, I realised I'd not applied tiles to the Procedurally Generated Caves demo (as posted earlier).

So, here's an updated version that includes some basic tiles that have been implemented in a very very cute way - read: not the usual method of having hundreds of painful nested if/else statements:

I wanted to have a better method than the "usual" so did a little digging around the net and found the following resource:

http://www.saltgames.com/2010/a-bitwise-method-for-applying-tilemaps/

It took me less than five minutes to apply this method to the original demo and it works beautifully. Huge thanks to Sam Driver for this (Note: I've also pinched the tile graphics he used - hope he doesn't mind!)

Since then, I've also found the following resource which goes into more detail regarding this bit-mask method (and in particular, how to use it for more types of blocks):

http://www.angryfishstudios.com/2011/04/adventures-in-bitmasking/

Press the PLAY MY CODE link on the bar above to see the code for the demo.

I've already started to turn this into a game so we'll see how that progresses, but first - I need to finish the Swarm game :)

PlayMyCode Mobile Demo

2012-05-01T13:20:00.000+01:00

The PlayMyCode chaps recently ran a demonstration of PlayMyCode at @momobrum (unfortunately, I didn't know about it in time so wasn't able to attend). However, they did enable, albeit an experimental, version of PlayMyCode that supports mobile devices.

I tried this out with a few of my previous demo's and figured I'd make one that was a little more suited:

It works fine on iOS devices, but I was experiencing issues using the default browser on the Samsung Galaxy S - the demo shows up, but touch actions don't get picked up. I'm sure this will get fixed soon as it's early days.

Well done to Joe and Seb at PlayMyCode for pushing their incredible site to new areas.

Now, if they could just add "context.clip" support then I could finish some texture mapping :D

How Itopia works on PlayMycode

2012-04-27T12:59:00.001+01:00

I'd originally intended to make Itopia into a game on PlayMyCode, but unfortunately, HTML5 performance isn't quite good enough (and is seriously rubbish when using Firefox!) to warrant any further development.

Instead I've moved it over to a desktop version (using libGDX) and will continue from there.

I did quickly try the same effect in the Swarm game I'm working on, and it looks smashing:

An image doesn't really do this justice - it looks absolutely lovely in motion :)

Unfortunately, the rest of the game doesn't quite fit now:

I'm now rebuilding the assets so they're more in keeping with the new look.

But what of Itopia on PlayMyCode? Well, until performance improves (not a fault of PlayMyCode I might add) then, not much. Instead, I've decided to break the code down here for anybody that's interested.

Have fun :)

Project Assets:

There's two main images used in this project:

blob.png

boomerspawn_spr.png

blob.png is used for almost everything in the demo! It's just shaped to do what we want. Boomerspawn_spr is used to give the "head" of the red devil a more defined look. It's quite amazing what you can do with limited assets :)

The music is called Factor and is by the talented Deceased Superior Technician. You can find a lot more of his music here:

NoSoapRadio

His music is free for any use (even commercial) - all you have to do is credit him appropriately :)

Code Structure:

The code is structured in the same way as I do all my projects on PMC. There's the globals at the top, followed by the main game loop, defined by the onEachFrame() do |delta| . The remainder of the code comprises all of the classes used (described below).

There's a couple of points to make before delving into the classes...

1) There's an empty image asset called $mainCanvas that has the same dimensions as the screen. Everything is drawn to this image rather than the main PMC canvas - hence why you'll see its definition being passed between classes/methods. This is often termed as a "back-buffer". When everything has been drawn to this canvas, it is itself drawn to the main PMC canvas. But why? Isn't this wasteful? Well, yes it is a little and for the purposes of the Itopia demo, it could be removed. However, I'd planned to use it to do other effects such as motion blur or other post-processing effects. It's up to you if you keep it like that or not :)

2) You'll notice the following in the globals section:

$blob       = new Image("blob.png")
$blobR      = tintImage($blob, :red)
$blobB      = tintImage($blob, :blue)
$blobG      = tintImage($blob, :green)

This code is pretty interesting and is something that Joe (one of the PMC developers) showed me. It turns out that the setColor(...) and drawImage(...) functions, when combined, are very expensive in performance terms. Instead of using setColor() it's better to pre-colour your images.

Above, we have the original blob image and then Red, Blue and Green versions - created using the following tintImage() function:


def tintImage( img, colour )

    temp = new Image( img.getWidth(), img.getHeight() )

    temp.setColor( colour )

    temp.drawImage( img, 0, 0 )

  

    return temp

end

Now, instead of using setColor() within the main code, we just use one of the pre-coloured images instead.

The main loop provides one parameter, delta in its block and is used to adjust the timings for entity movement. (see getDelta() in the reference documents).

The main loop clears the screen, ready for rendering and then also clears out the temporary canvas:

fill(0, 0, 0)
$mainCanvas.clear()
$mainCanvas.fill(20, 20, 40, 1.0)

$mainCanvas.setBlend(:add)

The setBlend(:add) is important here.  This defines that we want to use additive blending when drawing images.  Additive Blending is where the RGB colour elements of one image are added to the RGB elements of overlapping images.  If the two images are identical (in terms of colour) then when overlapping they will become brighter.  Itopia uses this to great effect, but the downside is the cost in performance.  In the demo, try creating a large number of jellyfish - you'll soon see the FPS plummet!

if ($controls.isLeftPressed())
$game.addJelly($controls.getMouseX(), $controls.getMouseY())
end
if ($controls.isRightPressed())
$game.addRedDevil($controls.getMouseX(), $controls.getMouseY())
end

The above lines instruct the game class to add a new entity - a jelly if the left mouse button is pressed and a red devil if the right mouse button is pressed.

$game.update(delta)
$game.render()

The above informs the game object that it must update and then render all of the entities it knows about.

setColor(:white)
drawImage($mainCanvas, 0, 0, false)

These last lines draw our temporary canvas to the screen.

Game class

The game class is the controller for all of the entities and related actions. Itopia isn't really a game yet, so this is fairly simple.

You'll see that in the globals section (at the very top of this project) is the creation of an instance of this class:

$game = new Game()

This is then accessed from within the main loop, the key elements being the update/render calls.


def new()

    // Array that will contain all our entities (Jelly or RedDevil)

    @entities     = []

    @numEntities  = 0

      

    // Create a new instance of our background particles (max of 100 particles)

    @dust       = new Dust(100)

end

The constructor for the game class defines an empty array for all of the entities. As the Jelly and RedDevil classes are actually sub-classes of Entity, we can manage them as Entity classes - no need for separate arrays for each type.

We also create an instance of the Dust particle generator.


def update(delta)

    @entities.eachIndex() do |i|

        @entities[i].update(delta)

    end

end

In any update operation I'll tend to use the eachIndex() operation rather than each(). This is a habit I've developed as an update in one of the classes could cause the array I'm iterating over to change (could even delete entries from it!). eachIndex() handles this case so there's no nasty issues lurking here :)


def render()

    @dust.render($mainCanvas)

    @entities.each() do |e|

        e.render($mainCanvas)

    end

end

The above issues a render call to the dust particle generator first as we don't want these particles appearing in front of the jelly's. One improvement could be in this area - use 3D perspective projection and have these particles in 3D along with the jelly's :)

Note, unlike the update() function, the render() function doesn't use eachIndex but uses each instead. This is because all updates have finished so no objects will be added/removed from the array.

The remainder of this class is just helper methods that are used to add or remove new entities, be them jellyfish or red devils.

Entity class

In game development, it's often the norm to create an Entity class that encompasses many of the common elements associated with (most, but not all) of your game "things".

In Itopia, we have the Jelly and the Red Devil. Both of these are entities and exhibit similar characteristics. Now, it would be pretty silly to have the identical code in these classes for such things as location, velocity etc. Instead, we have an Entity class that includes all of these common parameters.

The class itself should hopefully be fairly explanatory.

Jelly class

Ok, time for the interesting bits!


def new(x, y)

    // Pass the initial parameters to the parent Entity

    super(x, y, 1, 1)



    // The array of tentacles for this jelly

    @tentacles = []

      

    // Create three tentacles with random lengths, speeds

    @tentacles.push(new Tentacle(x, y, rand(0, 5), rand(15, 25)))

    @tentacles.push(new Tentacle(x, y, rand(10, 15), rand(15, 25)))

    @tentacles.push(new Tentacle(x, y, rand(20, 35), rand(15, 25)))



    // The movement of the jelly is defined by a simple math equation. Time is

    // a function of this equation and having a random value will position

    // the jelly at a different location to previous ones

    @time  = rand(0, 1000)

      

    // Speed of this jelly

    @speed = rand(0.1, 0.6)

end

The above is the constructor for the Jelly class. As it's a sub-class of Entity, the first thing we do is pass the initial parameters to the constructor of the Entity. These are simply the X/Y location. The velocities (VX/VY) aren't used here so we pass through 1,1

Each jelly will have a number of tentacles attached to it. The @tentacles array holds all of them.
In this demo, a jelly has three tentacles and they are created (using random length and initial time component) and pushed to the tentacle array.

As described in the code comment, the @time variable is a function of a simple math equation that governs the movement of the jelly. Giving it a random number has the effect of positioning the jelly at a different location.

The @speed variable governs how quickly the jelly moves about the path defined by the math equation given in the update() function below.


def update(delta)

    // Increment the time by the speed

    @time = @time + @speed

      

    // Is it time to adjust the speed?

    if (@time.floor() / 1000 == 1)

        @speed = rand(0.1, 0.9)

    end

      

    // Calculate new X/Y positions

    setY( (15 *

         (@time * -6).toRadians().cos()) +

         (240 + (180 * (@time * 1.3).toRadians().sin()) ) )

    setX( (15 *

         (@time * -6).toRadians().sin()) +

         (320 + (200 * (@time / 1.5).toRadians().cos()) ) )

            

    // Update each tentacle

    @tentacles.eachIndex() do |t|

        @tentacles[t].update(X(), Y()+8, delta)

    end

end

This is the main update function for the Jelly. The movement is controlled by the mathematical equation that is really just an wonky looking sine wave. Try drawing the points generated by it and then drawing a line between them to see how it looks. Also try adjusting some of these values to see what happens!

Once the new position has been calculated, each of the tentacles are updated - the head of each tentacle is always at the same position as the head of the jelly.

And finally, we draw the jelly


def render(canvas)

      

    // Draw all the tentacles

    @tentacles.eachIndex() do |t|

        @tentacles[t].render(canvas)

    end



    // Draw a blob for the head of the jelly

    canvas.setAlpha(0.3)

    canvas.drawImage($blobB, X(), Y(), 96, 64, true)

    canvas.drawImage($blobB, X(), Y(), 64, 56, true)

end

The tentacles are drawn first (by issuing a render() call on each tentacle). Following this, a couple of (fairly dim) blue blobs are drawn to define the head of the jelly. This should really look a lot better, but is ok for a first attempt!

Tentacle class

The tentacle class is probably the most complicated part of the project, but even so, is still very simple.

If you want a better understanding of the math used in both this and the Jelly class, try breaking each of the movement equations down and plotting them out.

Playing with the numbers within here can end up with some pretty wacky behaving tentacles!

I'll break the update function down here to help explain it better:


def update(headX, headY, delta)



      

    // Increment time by a fixed amount (not too fast)

    @t = @t + 0.005

      

    // Set the first node of the tentacle to be the position of the jelly head

    @nodes[0] = [headX, headY]

As with the jelly class, the movement is partially controlled by a function of time. This time is incremented based on the speed of tentacle movement (which in this case is fixed at 0.005).

The very first node of the tentacle must always be the same as the head of the jelly - otherwise it would look pretty strange, having tentacles appearing all over the place!

The position of all subsequent nodes of this tentacle are updated based on the position of the first node. The following loop iterates over each node (except the first one as that was defined above).


    // Update subsequent nodes

    1.upTo(@numNodes) do |i|

        distX = @nodes[i-1][0] - @nodes[i][0]

        distY = @nodes[i-1][1] - @nodes[i][1]



//            dist  = ((distX * distX) + (distY * distY)).sqrt()



        // Simple method to calculate the distance between two points. Not very accurate

        // but a lot faster than the sqrt() method above

        if (distX*distY < 0)

            dist = distX-distY

        else

            dist = distX+distY

        end

Ok, the above looks a little strange. What we're trying to do here is determine the distance between the current node and the previous one. Knowing this will allow us to move it by a small amount in the correct direction.

The distance between two given points (x1, y1) and (x2, y2) can be calculated using a Pythagorean Theorem:

d = square root of

or in code terms:

distance = sqrt( (x2-x1) * (x2-x1) + (y2 - y1) * (y2 - y1) )

which can be made simpler by breaking it down as:

xDistance = (x2-x1)
yDistance = (y2-y1)

distance = ( (distanceX * distanceX) + (distanceY * distanceY) ).sqrt()

However, you'll see in the code above that I've commented out the line with the sqrt() operation! As performance was an issue with this demo I tried all sorts of ways to improve it. The sqrt() operation can be fairly slow so I opted for a simpler, although prone to error and less accurate, approach.

Based on the distance we've just calculated, we now move the node of this tentacle by a small amount (30% of the distance calculated)


        // Adjust the position of this node by a small amount of the distance (30%)

        @nodes[i][0] = @nodes[i][0] + (distX * 0.3)

        @nodes[i][1] = @nodes[i][1] + (distY * 0.3)

We could just leave the movement as above, but it doesn't really look like the movement of a tentacle - I wanted something a bit more believable, so the following two lines add the necessary "wiggle factor".


        // Now determine a "wiggle" factor that makes the tentacles more believable

        mX = (@t*2+15).cos() * (15 * (i-1)/(@numNodes-1) + 1*(1-(i/@numNodes)))

        mY = (@t*8).sin() * (15*@mSpeed * (i-1)/(@numNodes-1) + 3 * (1-(i/@numNodes)))

If you imagine a sine wave and that each node of the tentacle exists at a point on this wave, then you can see that the tentacle would form what looks like a sine wave. However, that's not so good looking on its own. So, we adjust the phase and amplitude of the wave so that the movement is less so at the head of the tentacle and more so at the end. The above determines the value for the current node which is then applied:


        // And update the node positions again

        @nodes[i][0] = @nodes[i][0] + mX / i

        @nodes[i][1] = @nodes[i][1] + mY / i

    end

So that's the movement out of the way, but there's one last thing here. If you look at the demo again, you'll see two bright "lights" moving down the length of the tentacle. This is actually just a change in the brightness of certain nodes as they are drawn (see render() below). Which node is chosen to be bright, and how long they should shine for is calculated by the following logic:


      

    if (@brightTimer.isExpired())

        @brightTimer = new Timer(50)

        @bright = @bright + 1

        if (@bright >= @numNodes)

            @bright = 0

        end

    end

    if (@brightTimer2.isExpired())

        @brightTimer2 = new Timer(70)

        @bright2 = @bright2 + 1

        if (@bright2 >= @numNodes)

            @bright2 = 0

        end

    end

end

The last part of the tentacle class is the render() function:

@numNodes.times() do |n|

s = 1 + (0.5 * (n * 25).toRadians().sin())

canvas.setAlpha(0.05)

canvas.drawImage($blobB, @nodes[n][0], @nodes[n][1], @sizeX*s, @sizeY*s, true)

if (n == @bright || n == @bright2)

sz = 5

canvas.setAlpha(1.0)

canvas.drawImage($blobW, @nodes[n][0], @nodes[n][1], sz, sz*s, true)



    else

        sz = 5

        canvas.setAlpha(0.4)

        canvas.drawImage($blobB, @nodes[n][0], @nodes[n][1], sz, sz, true)

    end

end

This should be fairly self explanatory. For each node of the tentacle, we draw a fairly faint blue blob, the size of which is defined by "s = 1 + (0.5 * (n * 25).toRadians().sin()". This creates the "bulges" in the tentacle.

If the index of the current node being drawn is the same as the @bright or @bright2 variables, then we draw the blob image with an alpha of 1.0 (making it really stand out). If it's neither of these then we just draw a slightly dimmer blob image for this node.

RedDevil and RedTentacle classes

I won't go over these here as they're very similar to the Jelly/Tentacle classes. In fact, the RedTentacle class is a sub-class of Tentacle, but overrides the Render function to draw things a little differently.

I'll leave these two for you to figure out :)

Dust and DustParticle classes

Ok, I admit - worst name for a class ever! Dust - under the sea! My excuse - if you can call it one, is that I was in a rush and couldn't think of a better name :)

Having a plain black background proved a little boring so I added a small effect which randomly places tiny particles all over the screen. Each of the particles will have a random alpha level and will move about, very slowly, until it's life is over.

When a particle eventually dies, it resets itself - having new random parameters. Doing this, rather than creating a new particle, reduces the CPU overhead as we're not creating or destroying resources.

The Dust class is merely a container for all of the particles. It has one render(canvas) function that will iterate over all of the particles, updating them first and then drawing them.

Well, that's about it. Feel free to ask any questions and I'll do my best to answer.

Itopia Jellyfish

2012-04-17T12:52:00.000+01:00

I felt a little inspired by this great little tutorial by Charlie Knight over at http://www.charliesgames.com

BlobMonster Tutorial

I used the Blob image and the Monster movement code to get the head of each Jelly to move around and then came up with some simple trig code to control the tentacles.

Very early days and not sure exactly what I'll do with this yet, but does look kind of nice :)

As usual, the best performance is witnessed in Chrome and Safari. Firefox and Internet Explorer exhibit rubbish performance :(

Creating animations in PlayMyCode

2012-04-07T15:53:00.002+01:00

Here's a short example on how to create animations for use on PlayMyCode.

In this example, the animation is made up from one spritestrip - a single image containing all of the frames that make the animation.

There's our little pink devil! There are four frames in total with each frame having a size of 60pixels by 60pixels.

To get this little fellow to animate, I created a very simple class called Animation(). You can find this class in the source code of the example below (just click on the Play My Code button)

First, we load our spritestrip image:


    $devilImage = new Image("Devil2_spr_strip4.png")

And then, create the animation:


    animation  = new Animation($devilImage, 4, 0, -1, 60, 60, 100, -1)

Ok, so what do all those numbers mean? As mentioned previously, this animation has 4 frames. Each frame is 60x60 pixels in size and we want to animate with a 100ms delay between frames. We also want it to loop forever.

So:


    $devilImage   - the image containing the animated frames

    4             - the number of frames

    0             - the starting frame

    -1            - the end frame (we give -1 here so that it uses all frames

    60            - each frame is 60 pixels wide

    60            - each frame is 60 pixels high

    100           - the delay (in milliseconds) between each frame

    -1            - loop the animation forever

All that's left is to update and draw the animation. Both of these operations are done within the main game loop (onEachFrame):


    animation.update(delta)

    animation.draw(100, 100, true)

The animation.update(delta) will automatically manage all of the image manipulation for you.

Take a look through the Animation() class as there's a few other methods that allow greater flexibility, such as drawing a scaled/rotated image, stopping/restarting the animation etc.

The animation class doesn't take a copy of the source image so it's fairly memory efficient. Just declare your images as globals first.

Any questions, then feel free to ask :)

PlayMyCode Tips

2012-03-26T15:57:00.001+01:00

Here's some tips for PlayMyCode that relate to features not yet available:

So, let's say you have two strings:


myString1 = "123"

myString2 = "45.67"

Currently, there's no defined command to allow you to convert these strings to either integer or floating point values. However, all is not lost as you can use some fancy bit manipulation for which I've put together two helper functions below:


// Convert the given String to an integer

def toInteger(string)

    return string | 0

end



// Convert the given String to a floating point number

def toFloat(string)

    return string ** 1

end

And here's what happens with our original Strings:


myInteger = toInteger(myString1)

console(myInteger)

123


myFloat = toFloat(myString2)

console(myFloat)

45.67

Thanks to Joe at PlayMyCode for pointing the above out!

Here's some more helper functions I knocked up for use with Strings:

// Returns a new string that is a substring of the given string


def subString(str, startIdx, endIdx)

    val = ""

    startIdx.upTo(endIdx) do |i|

        c = str.getChar(i)

        val = val + c

    end

    return val

end



// Tokenize the given string and return entries in a block

def tokenize(str, token)

    val = ""

    str.each() do |c|

        if (c == token)

            yield val

            val = ""

        else

            val = val + c

        end

    end

    yield val

end

Examples:


myString = "Hello PlayMyCode How Are You Today?"

tokenize(myString, " ") do |seg|

    console(seg)

end

Hello

PlayMyCode

How

Are

You

Today?


console(subString(myString, myString.indexOf("PlayMyCode"), myString.indexOf("How")))

PlayMyCode

I'm sure that the PlayMyCode API will soon have these features, but for now the above will suffice.

Collision Detection

2012-03-20T09:20:00.000Z

I've been asked a couple of times how the collision detection works in the Asteroids game I developed on PlayMyCode. If you've not tried it yet, then you can find a playable link a few posts below.

I'd originally planned to use nothing but Polygon's and a Point-In-Polygon algorithm for collision detection, but then I realised that PlayMyCode had their own collision detection features that allow pixel-perfect hit detection.

Obviously, pixel-perfect detection wasn't going to work well with Polygon's and it's generally slow. However, in the interest of keeping things simple I tried out a few tests and was surprised at the performance, which led me on to how the collision detection works in Asteroids now.

Each object in the game (player ship, bullets, asteroids, UFO's etc) is rendered as a polygon. However, rather than drawing and managing polygons on the main canvas, they're rendered to their own separate image first. This operation is handled inside a Polygon class.

Having each object as an image not only keeps things at a decent rate but also means we can use the per-pixel detection that PlayMyCode provides.

// Check for a collision between this polygon and that given

    def isCollide(poly, centered)

        return isCollide(poly.Img(), poly.X(), poly.Y(), centered)

    end

    // Check for a collision between this polygon image and that given

    def isCollide(img, ix, iy, c)

        if (@img.isPixelOverlap(@x, @y, img, ix, iy, c))

            return true

        end

        return false

    end

And well, that's basically all there is to it! The @img is the local Polygon image to which isPixelOverlap() is called against another image (which is every single other -relevant- Polygon object in the game).

There was one other minor thing I had to do - the asteroids are actually filled polygons, but are filled with a very faint colour so as to not be different from the surrounding black! Why? Well, there is a rare event, triggered by a lapse in framerate where the player ship could potentially end up inside an asteroid. Here, the pixel overlap method would fail as their would be no collisions. Having the asteroid filled in this way means that the player would die instantly as a collision would be detected. Crude, but it works!

Note: For simplicity, the bullets are all rendered as polygon images rather than pixels. We can then extend the Polygon class and utilise its collision detection code.

Yes, this could be improved quite a bit. Currently, the game checks for collisions between the player and every asteroid, every bullet and every asteroid etc. This is somewhat costly and a better approach would be to limit the checks to objects that fall within the bounding box of the player for example.

However, as the performance doesn't seem to be an issue and I need to finish other projects I've left this for a rainy day - it's simple enough to do and the bounding box mechanism is already in the Polygon class. :)

Feel free to look through the code (available by clicking the CODE button on the PlayMyCode site).

Additive Blend Editor

2012-03-20T08:17:00.001Z

A friend asked how additive blend works and how he could create some funky effects in a game. He still didn't get it even after a few pints of beer - not sure if this was me being crap at explaining or him being a bit thick :)

Anyway, I figured I'd write a demo on PlayMyCode, but it soon turned into a sort of funky sprite editor. The above was me testing one feature out and then realising I'd spent an hour playing around! Everything above was generated using a single image - a simple glowy circle that's stretched and mashed around to create the desired shapes. Colours and alpha applied with lots of additive blend.

The "editor" will allow you to create your own funky sprites. Then, simply place a bounding box around the one you want and select "dump". This will dump an array of information in textual format which can be placed straight into your own PlayMyCode project. The output will be a pre-rendered sprite instead of having to render potentially hundreds of blended images. The framerate saving is quite significant.

It's fairly basic at the moment, but does support some basic editor features, including a grid, snap-to-grid and multiple undo levels.

Will post a working version here once I'm happy the dump feature is working as I want.

Retro Adventures: Asteroids

2012-03-13T15:24:00.001Z

Finally found some time to (almost) finish the Asteroids clone. The collision detection is now working, leaving just the UFO's to add.

I've tried to comment the code as thoroughly as possible so others can learn from it.

Enjoy :)

Arrow keys to move, Z to fire and X or Space to perform a Hyperspace Jump!

Spiral!

2012-03-04T22:36:00.000Z

Whilst trying to make a spiral explosion effect for the Alien Swarm remake I accidentally made this demo (the accidental stuff is always the best!)

Source code is available on the PlayMyCode site - just click on the Code button.

Procedurally Generated Caves

2012-02-16T07:25:00.002Z

Very quickly thrown together demo for procedural cave generation:

Press "space" to generate further maps

Not finished yet, as a few more clean-up stages are needed to remove some nasty looking bits. The number of miners also needs tweaking controlling so there's some control over the size of the map. Source code is available on the PlayMyCode site - just click on the Code button.

Retro Adventures II

2012-02-12T22:03:00.000Z

Back in the 80's I owned a variety of home computers including the superb Atari 800. The only major downside to this wonderful machine was the time it took to load a game from tape - it could literally take hours and most often than not - it would crash just before it had finished loading and you'd have to start again!

As it was such a pain to load games, the "little loaders" were played more often - was either that or end up doing homework or chores around the house! Of these little loaders, my all time favourite was a game called Alien Swarm by Bruce Thompson:

I never did own the original and as hard as I've tried, I've never been able to track down a retail copy. I even attempted to track down Bruce Thompson himself, but eventually gave up. If you want to try the original game, you can play using an Atari 800 emulator. The game is located here: Atari 800 Alien Swarm

My lasting memory of this game was it's unique mechanic for the use of "energy". If you died, then it wasn't necessarily game over. Provided you had sufficient energy (after a deduction for getting hit) then you would move on to the next wave. Your bullets used up energy and you had to collect energy reserves to enable you to fire.

The marauding aliens were all spawned from this one worm like creature, and were intent on stealing your energy reserves at all costs. A variety of enemies were spawned as you progressed further and your score got higher. Some of the enemies were absolute shits - the "smart bombs" that tracked your movement were especially annoying - particularly when a million other things were flying around you! To make matters worse, the worm's tail would stop your bullets dead - so if you were trying to shoot down an alien that had stolen an ammo and the tail was in the way - you're out of luck! It's gone!

Managing your energy reserves was key. A good strategy was one where you didn't completely fill all your energy bars to the top, but rather kept it around 1-2 bars. The reason for this is that if you die - you lose any energy you're carrying! In addition, 5 energy reserves are subtracted from whatever is left when you die. If there were 5 or less reserves then, well, it was game over.

As a sort of tribute to this game, and since I've been enjoying mucking around with PlayMyCode, I decided to re-imagine Alien Swarm.

It's still a little rough and ready and very much a work in progress, but it's getting there. I have take a few liberties here and there too - there's no longer just the one worm to watch out for, but many (depending on how far you progress!)

There's also a nice little feature where you can fire up a shield (as seen above) and then go and "ram" any aliens that are on the deck and searching for energy! The shield will also protect you from falling ammo blocks, bombs dropped by aliens, and it will also deflect bouncing bombs. However, watch out - it won't stop the worm thing from hitting you!

As always, being a PlayMyCode game, it will be completely free, along with the source code!

I'll post a playable link when it's finished :)