|
GameProgramming_3
Game Programming III - standard effectsThe previous example showed you how to implement a custom effect. While custom effects are powerful and allow you to implement really cool effects, it is too much work for many programmers who much prefer to choose from pre-packaged effects. If you are one of those people, iAnimeEx.js is for you. Using iAnimeEx.js is quite simple. You just need to import iAnimeEx.js and iBrowse.js along with iAnime.js, <script src="ianime025.js" type="text/javascript"></script> <script src="ibrowse010.js" type="text/javascript"></script> <script src="ianime025ex.js" type="text/javascript"></script> and specify one of effects defined in iAnimeEx.js. At this moment (12/1/07), iAnimeEx (v0.25) supports following effects.
To see them in action, take a look at this example. In order to show how to use those standard effects in games, I have modified the sample game template to use those standard effects (removing the custom effect from the previous example). Here is the source code (and click here to see the application). <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="ianime025.js" type="text/javascript"></script>
<script src="ibrowse010.js" type="text/javascript"></script>
<script src="ianime025ex.js" type="text/javascript"></script>
<script type="text/javascript">
var anime = new iAnime();
var iconSize = 40;
var rows = 8;
var cols = 8
var cells = [[],[],[],[],[],[],[],[]];
var images = ["map","photo","clock","ipod","tools","browser","weather","graph"];
function onClick(e)
{
cells[this.col][this.row] = null;
anime.add({
element:this,
effect:'fadeout',
duration:300,
onComplete: function() {
fillCells();
document.body.removeChild(this.element);
}
});
}
function addCell(col, extra)
{
var obj = document.createElement("img");
obj.index = Math.floor(Math.random()*8);
obj.src = "images/"+images[obj.index]+"_40.png";
obj.style.position = "absolute";
obj.style.left = (320-iconSize*cols)/2+iconSize*col+"px";
obj.style.top = (-iconSize*extra)+"px";
document.body.appendChild(obj);
obj.onclick = onClick;
obj.col = col;
return obj;
}
function fillCells()
{
anime.pause(true);
for (var col=0; col<cols; col++) {
var extra = 0;
for (var row=0; row<rows; row++) {
if (!cells[col][row]) {
var obj = null;
for (k=row+1; k<rows; k++) {
if (obj = cells[col][k]) {
cells[col][k] = null;
break;
}
}
if (!obj) {
obj = addCell(col,++extra);
}
obj.row = row;
cells[col][row] = obj;
var top = 340-(row+1)*iconSize;
var msec = Math.sqrt(top - obj.offsetTop)*100;
anime.add({ element:obj, effect:'bounce', y:top, duration:msec });
}
}
}
anime.pause(false);
}
</script>
</head>
<body onload="fillCells()"></body>
</html>Significant difference is in onClick, which now performs the 'fadeout' effect. function onClick(e)
{
cells[this.col][this.row] = null;
anime.add({
element:this,
effect:'fadeout',
duration:300,
onComplete: function() {
fillCells();
document.body.removeChild(this.element);
}
});
}Notice that I am specifying the callback function in in-line form so that it fills cells after the fadeout effect, and remove the element from the document). |