一.简介
在大量游戏制作过程当中,必不可少的一个重要元素就是Loading.在大量的flash游戏当中我们经常可以看到,比如《XXX》的Loading
一个好的Loading,可以给用户不错的第一感觉,可以吸引更多的玩家。在Canvas中,我们也可以制作一个动态的loading.
这一篇,我们先看看效果,在后续的文章当中,我们一步一步把它提取成插件可配置的形式,方便大量的游戏复用。
二.预览版制作
Word = function (text, fontSize, color, position) {
this.text = text;
this.fontSize = fontSize;
this.color = color;
this.position = position;
}
Vector2 = function (x, y) {
this.x = x || 0;
this.y = y || 0;
};
var textL = new Word("L", 30, "#ffffff", new Vector2(40, 60));
var textO = new Word("o", 30, "#ffffff", new Vector2(60, 60));
var textA = new Word("a", 30, "#ffffff", new Vector2(80, 60));
var textD = new Word("d", 30, "#ffffff", new Vector2(100, 60));
var textI = new Word("i", 30, "#ffffff", new Vector2(120, 60));
var textN = new Word("n", 30, "#ffffff", new Vector2(140, 60));
var textG = new Word("g", 30, "#ffffff", new Vector2(160, 60));
var textPoint1 = new Word(".", 30, "#ffffff", new Vector2(180, 60));
var textPoint2 = new Word(".", 30, "#ffffff", new Vector2(200, 60));
var textPoint3 = new Word(".", 30, "#ffffff", new Vector2(220, 60));
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
cxt.fillStyle = "#ffffff";
var text = [];
text.push(textL);
text.push(textO);
text.push(textA);
text.push(textD);
text.push(textI);
text.push(textN);
text.push(textG);
text.push(textPoint1);
text.push(textPoint2);
text.push(textPoint3);
function drawAllWords() {
cxt.font = "bolder " textL.fontSize "px 宋体";
cxt.fillText(textL.text, textL.position.x, textL.position.y);
cxt.font = "bolder " textO.fontSize "px 宋体";
cxt.fillText(textO.text, textO.position.x, textO.position.y);
cxt.font = "bolder " textA.fontSize "px 宋体";
cxt.fillText(textA.text, textA.position.x, textA.position.y);
cxt.font = "bolder " textD.fontSize "px 宋体";
cxt.fillText(textD.text, textD.position.x, textD.position.y);
cxt.font = "bolder " textI.fontSize "px 宋体";
cxt.fillText(textI.text, textI.position.x, textI.position.y);
cxt.font = "bolder " textN.fontSize "px 宋体";
cxt.fillText(textN.text, textN.position.x, textN.position.y);
cxt.font = "bolder " textG.fontSize "px 宋体";
cxt.fillText(textG.text, textG.position.x, textG.position.y);
cxt.font = "bolder " textPoint1.fontSize "px 宋体";
cxt.fillText(textPoint1.text, textPoint1.position.x, textPoint1.position.y);
cxt.font = "bolder " textPoint2.fontSize "px 宋体";
cxt.fillText(textPoint2.text, textPoint2.position.x, textPoint2.position.y);
cxt.font = "bolder " textPoint3.fontSize "px 宋体";
cxt.fillText(textPoint3.text, textPoint3.position.x, textPoint3.position.y);
}
var currentMap = 0;
drawAllWords();
var drawAsync = eval(Jscex.compile("async", function () {
while (true) {
cxt.clearRect(0, 0, c.width, c.height);
drawAllWords();
if (currentMap > 395) currentMap = 0;
currentMap = 5;
if (parseInt(currentMap / 40) <= text.length - 1) {
text[parseInt(currentMap / 40)].fontSize = 60 - currentMap % 40;
}
if (parseInt(currentMap / 40) 1 <= text.length - 1) {
text[parseInt(currentMap / 40) 1].fontSize = currentMap % 40 20;
}
$await(Jscex.Async.sleep(10));
}
}));
drawAsync().start();
整个预览版不到一百行代码,因为它只是一个预览版,离文字内容、文字大小、文字位置、轮循速度等可配置还有很大的距离。
三.在线演示
四.同步
本文已同步更新至: