Dart Canvas

I entered the Github GameOff at the start of the month and forgot all about it, The GameOff is a hackathon for the month of November that requires participants to create web based game. Seeing as I would like to learn some of the principles of game design I thought I would proceed anyway in my spare time with my entry. Since I have been experimenting with Dart I decided that it would be a good place to start.

 

GitHub GameOff 2012 – Theres still time !

The Basics 

I have never used canvas in anger and decided this would be my start point for my Game/Application (of which I still have no idea what it will be). There are a lot of tutorials available for canvas and HTML5, however most of them will be in Javascript they can be easily ported to DART. Check out the Mozilla Developer Network for some really good tutorials. I like to write about the work Iv done on my blog especially when its new to me, as I find it helps secure the new concepts by writing about them and also hope to share my experiences.

Getting Started 

canvas.html

Ok. So your ready to start and you have created a new DART project. Open the .html page and add a canvas element to the document (see example)

<canvas id='canvas' width='450' height='450'> </canvas>

You can add a fallback element below incase the browser of the user doesn’t support canvas. However this should be bare minimum to run in chromium.

canvas.dart

Open the DART file. I created a new class for my application called Game. Feel free to name your class whatever you wish

It is important to understand the two main elements we will be working with.

CanvasElement – This is the element in which all the drawing data will be rendered. This correlates to the element you specified in your html.

CanvasRenderingContext2D –  Implementation of CanvasRenderingContext this is the class that will allow you to draw the shapes onto the #canvas surface.

Declare both of these variables at the top of your class like so

CanvasElement canvas;
CanvasRenderingContext2D ctx;
int WIDTH;
int HEIGHT;

Now its time to set these, you can do this in the initialisation of your class, However I put this logic in an init() method

canvas = document.query('#canvas');
ctx = canvas.getContext('2d');
WIDTH = canvas.width;
HEIGHT = canvas.height;
player = new Player(ctx);
requestRedraw();

The observant will notice that the code above calls request redraw this will be vital in maintaining an animation loop later in the tutorial. The only logic in this method for a basic implementation will be

window.requestAnimationFrame(draw);

In this call to requestAnimationFrame you pass in the method that you wish to use to draw your scene. In my example this is called simply draw. For now create an empty method

void draw(num _){
//Logic will be added later
}

You now have the canvas element and drawing context for your app available for use. Lets start drawing.

Drawing on Canvas 

Now you have set up the structure for you application, Lets look at how you can draw basic shapes onto the canvas.

Again place this logic wherever you prefer in your application as long as its execution comes after the above steps. I created a new method called createCanvasBg()

void drawCanvasBg(){

ctx.fillStyle = ‘black’;

ctx.fillRect(0, 0, WIDTH , HEIGHT);

}

Now in the draw method you implemented as part of the set up, add a call to drawCavasBg() in your method body. Run the application making sure you have kicked off the initialisation code in the main execution block. If successful you should see that you now have a black box on your screen. Not very exciting I know !

Create a new method(createSquare) or add logic to your execution block that will create the new square on the screen. Follow the implementation below


ctx.fillStyle = 'red';

// ctx.fillRect(x,y,height,width)
ctx.fillRect(100, 100, 50 , 50);

In order to draw a circle add the following instead of fillRect use the arc function.

context.arc(x, y, radius, 0 , 2 * Math.PI, false);

Run your application again and you should see a nice red square added to the canvas.

What you should have at this point

Conclusion

I hoped to provide a very very basic tutorial of canvas with dart as often drawing and graphics in the browser can intimidate people. This is how I got started and I was able to see what’s possible, I am currently contemplating making a simple platform game with a similar structure. Time allowing I hope to update this tutorial series as I go sharing my new experiences in the area. Next we will look at adding a player to the canvas that we can control using the arrow keys. This will be the hero for our game. I have also started looking at Dart Box2D a popular Javascript physics engine that has been ported to Dart, which I would suggest looking at if you havent already Seth Ladd from Google Dart Team has a good series of tutorials on his blog for this also.

Dart is a great language I am really enjoying developing with it and hoping to get more involved in the open source development of the language working on a few bugs at the moment. Just trying to find time out with work can be very difficult. I hope  you find this series useful I will continue to update my progress of my Github GameOff submission as it evolves (if it evolves :S)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s