PART THREE
A 2D bob starfield is a little more involved than a dot starfield, but still quite an easy thing to create using CODEF. To make it even easier, there is even a simple library specifically for this purpose.
Add the following line into your SCRIPT code section, after the main CODEF_CORE.JS call.
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_starfield.js"></script>
That will bring the script into play, and next we start to define the starfield we want, give it properties, and finally draw it onto your canvas.
After you have defined your canvas in your case, you need to define the starfield.
var mystarfield;
Now we define the parameters of the starfield.
var mystarsparams=[
{nb:10, speedy:0, speedx:2.0, params:0},
{nb:10, speedy:0, speedx:1.5, params:1},
{nb:10, speedy:0, speedx:1.0, params:2},
];
Let me explain how these parameters work...
The key commands here are:
{nb:W, speedy:X, speedx:Y, params:Z},
...where W is the number of stars in this command, X is the speed in pixels per refresh in the Y plane (Vertical), and Y is the speed in pixels per refresh in the X plane (Horizontal plane), and Z is a parameter which links to the bob we want to assign to it.
In our examples, I have three sets of bobs defined, one set of 10 bobs moving left to right at 2 px per refresh, linking to bob number 1 (see below), another set of 10 bobs moving left to right at 1.5 px per refresh, linking to bob number 2 (see below), and finally a third set of 10 bobs, moving left to right at 1 px per refresh, linking to bob number 3 (see below).
(NOTE: To move right to left, set tge Y value at a NEGATIVE value).
Now we have to link the parameters to the bobs in question. This defined as per below...
var ball = new Array();
ball[0]=new image('http://codef.namwollem.co.uk/files/ball.png');
ball[1]=new image('http://codef.namwollem.co.uk/files/ball_white.png');
ball[2]=new image('http://codef.namwollem.co.uk/files/blue_ball.png');
We define an array, in this case called 'ball'. It has three entries, each pointing to a different bob object.
NOTE: We can use local files, or remote files to call the images for each bob.
NOTE: You can repeat the same file if you choose, or call different bob images - your choice!
Next, in the INIT section, we have set command to these parameters.
mystarfield=new starfield2D_img(mycanvas,ball,mystarsparams);
This defines a 2D bob starfield, applies it to the canvas of choice (in this case, "mycanavs"), with the ball array, and using the parameters we defined above.
Finally, we call the command to draw the starfield on the canvas.
mystarfield.draw();
You can see the entire script and HTML below, and see it in action here.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TEST</title>
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_core.js"></script>
<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_starfield.js"></script>
<script>
var mycanvas;
var mystarfield;
var mystarsparams=[
{nb:10, speedy:0, speedx:2.0, params:0},
{nb:10, speedy:0, speedx:1.5, params:1},
{nb:10, speedy:0, speedx:1.0, params:2},
];
var ball = new Array();
ball[0]=new image('http://codef.namwollem.co.uk/files/ball.png');
ball[1]=new image('http://codef.namwollem.co.uk/files/ball_white.png');
ball[2]=new image('http://codef.namwollem.co.uk/files/blue_ball.png');
function init(){
mycanvas=new canvas(640,480,"main");
mystarfield=new starfield2D_img(mycanvas,ball,mystarsparams);
go();
}
function go(){
mycanvas.fill('#000000');
mystarfield.draw();
requestAnimFrame( go );
}
</script>
</head>
<body onLoad="init();">
<body bgcolor="#FFFFFF">
<br>
<center>
<div id="main"></div><br><br>
<a href="javascript:window.location='view-source:'+window.location">View Source</a>
</center>
</body>
</html>
No comments:
Post a Comment