Getting started with Okapi – Part 1

16. November 2010 Noch keine Kommentare

Ever since I’ve heard Branden Hall talk about Okapi at this years Flash on the Beach Conference I’ve been eager to get my hands on it and start playing around. Below you can see what I have come up with by now.

So I thought a lot of other people might like to try that out as well, so why not write a simple Tutorial. So here we go.

At least for me it’s always way more fun to use your own unique assets than messing with the ones that come with the examples. So what you’ll learn in this tutorial is getting your artwork from Illustrator into a format that you can use with Okapi.

Preparation

First of course we need to setup everything we need.

Download Okapi from http://www.okapijs.org
(or have a look at Okapi@GitHub if you know what you are doing)

Download Ai->Canvas for Adobe Illustrator from http://www.visitmix.com/labs/ai2canvas/

If you want you can also download this example and all assets used: example.zip

Exporting Artwork

After you have installed Ai->Canvas

You now have a html-file with your artwork as a canvas looking like this:

function init() {

      var canvas = document.getElementById("canvas");
      var ctx = canvas.getContext("2d");

      draw(ctx);
    }

    function draw(ctx) {

      // ebene1/Pfad
      ctx.save();
      ctx.beginPath();
      ctx.moveTo(22.8, 21.9);
      ctx.bezierCurveTo(22.8, 21.9, 3.0, 24.0, 0.9, 42.7);
      ctx.bezierCurveTo(-1.1, 61.5, 4.1, 71.9, 16.6, 74.0);
      ctx.bezierCurveTo(29.1, 76.1, 35.3, 66.7, 28.0, 54.2);
      ctx.bezierCurveTo(20.7, 41.7, 25.9, 27.1, 38.4, 34.4);
      ctx.bezierCurveTo(50.9, 41.7, 58.2, 65.2, 49.9, 74.3);
      ctx.bezierCurveTo(41.6, 83.4, 24.9, 80.2, 27.0, 96.9);
      ctx.bezierCurveTo(29.1, 113.6, 50.9, 130.2, 61.4, 108.4);
      ctx.bezierCurveTo(71.8, 86.5, 58.2, 67.7, 75.9, 52.1);
      ctx.bezierCurveTo(93.7, 36.5, 86.4, 27.1, 75.9, 10.5);
      ctx.bezierCurveTo(65.5, -6.2, 49.8, 1.1, 43.6, 10.5);
      ctx.bezierCurveTo(43.6, 10.5, 35.9, 16.6, 22.8, 21.9);
      ctx.closePath();
      ctx.fillStyle = "rgb(198, 211, 60)";
      ctx.fill();
      ctx.strokeStyle = "rgb(57, 51, 45)";
      ctx.lineJoin = "miter";
      ctx.miterLimit = 4.0;
      ctx.stroke();
      ctx.restore();
    }

If you’re familiar with the Flash drawing API this will look quite familiar. Even if you’re not, what it basically means is setup a Canvas, enter the 2D Context and then draw a couple of paths.
Just one quick note for Flash-Coders as this looks quite weird at the first glance – you first draw your paths and then assign parameters like line width afterwards.

Asset Library

Next step is to copy simple04.html and rename it to yourartwork.html as well as copy geo04.js and rename it to yourasset.js.

Then you open yourasset.js and change the following line:

library.geo04 = function() {
to
library.yourasset = function() {

Then you copy everything inside the draw function from your earlier exported asset and use it to replace everything between

var ctx = canvas.getContext("2d");
and
return canvas;

Next you need to adapt those two lines to represent the proper dimensions:

canvas.setAttribute("width", 52);
canvas.setAttribute("height", 52);

The easiest way is to just do this by trial and error.
In case you are using my example asset I can tell you that what you need is:

canvas.setAttribute("width", 88);
canvas.setAttribute("height", 120);

Last Step – Engine Setup

Finally open up your yourartwork.html and replace the following lines:

<script type="text/javascript" src="geo04.js"></script>
with
<script type="text/javascript" src="yourasset.js"></script>

and

var geoSymbol = library.geo04();
with
var geoSymbol = library.yourasset ();

Enjoy

Now open up yourartwork.html in the Browser of your choice and enjoy!

One last tip: Event though Firefox might not be the fastest browser to use Okapi with, it has one great advantage over all the other ones: You can easily save a snapshot by just right-clicking on the canvas and save just as if it was a normal graphic.

So far for now. The next tutorial will focus on how to change the behaviour of your asset using the various capabilities of Okapi.

Oh and please spread the word about Okapi and this tutorial as well as upload a lot of pictures to Flickr!

to top Tweet this

Sei der Erste der “Getting started with Okapi – Part 1” kommentiert!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>