Take the 2-minute tour ×
Game Development Stack Exchange is a question and answer site for professional and independent game developers. It's 100% free, no registration required.

I'm making a game in coffeescript (although for the sake of this problem that's probably not all that relevant) and html5's canvas. It's a game that involves a paint cannon, that fires circular particles of paint that can paint elements of the level and the player. The problem is I'm not sure how to accomplish the painting. The diagram below illustrates what I'm trying to accomplish:

enter image description here

Using canvas, the particles are drawn using context.arc(), the players using drawRect.arc() and the floor can be an arbitrary polygon with drawing code as follows:

    @drawingContext.beginPath();

    tV = b2Math.AddVV(pos, b2Math.MulMV(body.GetTransform().R, @vertices[0]))
    @drawingContext.moveTo(tV.x, tV.y)
    for i in [1..@vertices.length - 1]
        v = b2Math.AddVV(pos, b2Math.MulMV(body.GetTransform().R, @vertices[i]))

        @drawingContext.lineTo(v.x, v.y)
    @drawingContext.lineTo(tV.x, tV.y)

    @drawingContext.closePath()
    @drawingContext.stroke() 
    @drawingContext.fill()

It would be too intensive to keep track of all the circles that should be painted on to objects and would soon bog down, with potentially 60 clipped circles per second being added to be drawn on top of objects.

The original thought was to stack two canvases on top of each other, so then we could draw the levels once and then when ever necessary just draw the paint splat over them once and forget about it (changing the composition mode to source-atop to get appropriate clipping), and since we're not redrawing it would stay there. However, this won't work on moving objects (like players) (that can also rotate and change size relative to the camera). I'm not sure how to do it, since all objects are made up of solid colour to start with there's no texture data or anything we can modify.

share|improve this question

1 Answer 1

up vote 1 down vote accepted

Your best bet would probably be to use images, with several variations with paint on them. E.g. have one image with paint on the left, one with paint on the right, one with more paint on the right, one with more paint on the left, you get the idea. When something get's hit with paint just change the image to one of those. When it get's hit again change it to one with more paint splats, and so on, until it's covered with paint.

If you wanted something a bit more robust you could manipulate the actually pixels of the image and change it to have a circle on it when it's hit. This would be harder however. Google 'canvas getImageData' for more on this.

Hope this helps and best of luck on your game!

share|improve this answer
    
We end up going for a system using getImageData like you suggested. Thanks for the suggestions. –  dogBatman Aug 13 '13 at 11:31

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.