We have miages, music, rasters, starfields, so what have we missed out?
Oh yes, that's it... a scrolltext!
Let's learn how to make a simple horizontal scrolltext next.
Firstly, we'll need to add a new script file to load our specific scrolltext library.
We need to call a new script in the <script> section of our page, as we need to load the "codef_scrolltext" script.
So, look for the following line in your code...<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_core.js"></script>
...and then ADD this line afterwards.<script src="http://codef.namwollem.co.uk/JS/CODEF/codef_scrolltext.js"></script>
Now we are calling the correct scripts, we can begin to create our scroller!
We need to define a scrolltext, the actual text we want to display, AND most importantly, we need to load a font image.
The first two are easy, just add these lines into the code...
var scrolltext;
var text=" TEST MESSAGE...... THIS IS HOW TO DO A SIMPLE HORIZONTAL SCROLLTEXT... ";
var font = new image('font7.png');
As before when using images, these can be local files, or on a URL elsewhere, although having the file locally is generally more sensible - in case the URL changes for the remote file!
A quick note about FONT files, these are normal image files, but are made to a specific format, which means the CODEF scrolltext script knows which part of the image relates to which character.
It's probably a good idea to make use of other peoples font files to begin with before you decide to get creative and make your own!
Next up, in the INIT section of the code, we need to define exactly HOW this scrolltext will work.
font.initTile(32,32,32);
scrolltext = new scrolltext_horizontal();
scrolltext.scrtxt=text;
scrolltext.init(mycanvas,font,4);
The first line defines the font size in pixels, in this case each letter is 32 pixels by 32 pixels, and the third number is the character offset. This refers to the SPACE character before the A letter we can see in the image above. Starting with a ZERO, this SPACE is 32 characters in to the character set. With this defined, the script now knows which tile relates to which character called by the text.
Then we define the scroll type - in this case "scrolltext_horizontal".
Next we assign the variable "text" to our scrolltext - the "text" was defined earlier in this page.
Lastly we define WHICH canvas we want the scrolling text to appear on (in this case 'mycanvas'), which font we want to use (in this case we have defined 'font' as the one we want to use), and then the speed (pixels per refresh) of movement.
Once this is all done, we simply call the scrolltext in our GO section of the code.
scrolltext.draw(224);
The value used after the call is the Horizontal position on the canvas where the scrolltext will appear.
You can see the page code below, and a working example 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_scrolltext.js"></script>
<script>
var font = new image('font7.png');
var mycanvas;
var scrolltext;
var text=" TEST MESSAGE...... THIS IS HOW TO DO A SIMPLE HORIZONTAL SCROLLTEXT... ";
function init(){
mycanvas=new canvas(640,480,"main");
font.initTile(32,32,32);
scrolltext = new scrolltext_horizontal();
scrolltext.scrtxt=text;
scrolltext.init(mycanvas,font,4);
go();
}
function go(){
mycanvas.fill('#000000');
scrolltext.draw(224);
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