Html 5ゲームフレームcreateJsの簡単な使い方
37045 ワード
声明:本文はオリジナルの文章で、もし転載する必要があるならば、出所WAxesを明記してください、ありがとうございます!
最近ちょうどcreateJsの枠组みを使って、后でしばらく使っていないで后で忘れることができることを恐れて、だからここで记录をして、后で使うことができるかもしれません.
createJsのネット上の中国語のチュートリアルはとても少なくて、以前UCはXcanvasのフォーラムがcreateJsの詳しいチュートリアルがあって、しかしXCanvasチームの解散に従って、そのウェブサイトも閉鎖しました.ネット上の大部分は非常に基礎的なチュートリアルで、少し千回一律な感じがします.だからスレ主はcreateJsをダウンロードして、無理に英語のドキュメントを見ました.スレ主という英語6級で300点以上しか取れなかったスラグにとっては、骨が折れるように見えますが、無理に大まかな使い方を模索しました.だから今は学んだだけ記録して、その後も不定期にこの枠組みの新しい学習心得を更新するかもしれません.結局、自分にはこれからも役に立つ.
本文はcreateJsを学びたい初心者に役立つことを望んでいます.スレ主も習ったばかりなので、本文には不正確な点があるかもしれないので、参考にして、不正な点があれば斧正を歓迎します.
雑談はここまでして、直接テーマに入ります.
スレ主はcreateJsで簡単なクールなゲームDEMOを書いたので、それを例に挙げましょう. DEMOを見て私を突いて .
createJsの由来は、基礎とかは言わずに、createJsの使い方をそのまま話しましょう.
まずcreateJs公式サイトでダウンロードし、createJsはeaselJs(グラフィックアニメーション)、preloadJs(ファイルロード)、soundJs(オーディオ制御)、tweenJs(パッチアニメーション)の4つの部分に分かれています.ダウンロードするときは、圧縮版ファイルを2つダウンロードし、プロジェクトでの参照を使用し、ソースファイルをダウンロードして、使い方、API、demoなどを表示することをお勧めします.スレ主は現在easelJsとpreloadJsしか使っていないので、しばらくはこの2つだけと言っていますが、実はこの2つだけで十分です.
次に、分析コードを開始します.
まずjsファイルを導入する
ステージの初期化を行います.
上でpreloadJsの方法を使って、1つのloaderを実例化して、ロードする必要があるピクチャーファイルをmanifestの中に置いて、ロードを行って、ロードが完成した後にコールバックhandleComplete関数を呼び出します:
ロード完了バックエンドの画像データを取得するにはloaderを直接使用する.getResultは取得できます.クールなゲームには背景が必要です.だから、skyをインスタンス化してビットマップを描画します.bf法はbeginBitmapFillの略です.この方法はビットマップの描画を開始します.後ろのdrawRectはビットマップの描画領域です.領域はキャンバス全体ですから、drawRect(0,0,C_W,C_H)です.実例化されたskyはそのままステージに追加すればいいです.次に、キャラクタをインスタンス化し、createManメソッドの後に、自分でカプセル化したと言います.
そしてステージループの設定をして、上にコメントがあったら、言わないでください.
ステージ設定でmapHandleは地図データの初期化です.
以下は人物モジュールのパッケージです
人物のモジュールのカプセル化は简単なcreateJsのカプセル化の上で更なるカプセル化を行って、カプセル化はとても简単で、createJsで1つの精霊の类を実例化して、更に精霊の表をバインドして、上のコードの中で注釈があって、基本的にすべてはっきり言いました.
以下にパッケージされた石と金貨モジュールを貼り付け、簡単に言えば背景のループを実例化し、石と金貨を予め実例化し、応答した石を移動し、石が舞台を超えた領域に移動したとき、彼のvisible属性をfalseに設定し、最後の位置に石を追加して新しい移動を行う.金貨も同じです.地図データは予め定義された文字列によって実現される.
パッケージング方法は上の人物モジュールとパッケージングの差は多くありませんが、人物は精霊類、石金貨は形状類を使います.ビットマップの描画によって、ビットマップの画像を描くのですが、原理は同じです.
最後に、ステージのフレーム単位処理のtickメソッドです.
フレームごとの処理は、自分でゲームを書くように、ステージ内のすべてのオブジェクトを1つずつ論理演算し、対応する処理を行う.
基本的にcreateJsの使い方は比較的簡単で強力です.自分で車輪を作るより手間が省けます.
ソースアドレス:https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Game-demo/runningMan
最近ちょうどcreateJsの枠组みを使って、后でしばらく使っていないで后で忘れることができることを恐れて、だからここで记录をして、后で使うことができるかもしれません.
createJsのネット上の中国語のチュートリアルはとても少なくて、以前UCはXcanvasのフォーラムがcreateJsの詳しいチュートリアルがあって、しかしXCanvasチームの解散に従って、そのウェブサイトも閉鎖しました.ネット上の大部分は非常に基礎的なチュートリアルで、少し千回一律な感じがします.だからスレ主はcreateJsをダウンロードして、無理に英語のドキュメントを見ました.スレ主という英語6級で300点以上しか取れなかったスラグにとっては、骨が折れるように見えますが、無理に大まかな使い方を模索しました.だから今は学んだだけ記録して、その後も不定期にこの枠組みの新しい学習心得を更新するかもしれません.結局、自分にはこれからも役に立つ.
本文はcreateJsを学びたい初心者に役立つことを望んでいます.スレ主も習ったばかりなので、本文には不正確な点があるかもしれないので、参考にして、不正な点があれば斧正を歓迎します.
雑談はここまでして、直接テーマに入ります.
スレ主はcreateJsで簡単なクールなゲームDEMOを書いたので、それを例に挙げましょう. DEMOを見て私を突いて .
createJsの由来は、基礎とかは言わずに、createJsの使い方をそのまま話しましょう.
まずcreateJs公式サイトでダウンロードし、createJsはeaselJs(グラフィックアニメーション)、preloadJs(ファイルロード)、soundJs(オーディオ制御)、tweenJs(パッチアニメーション)の4つの部分に分かれています.ダウンロードするときは、圧縮版ファイルを2つダウンロードし、プロジェクトでの参照を使用し、ソースファイルをダウンロードして、使い方、API、demoなどを表示することをお勧めします.スレ主は現在easelJsとpreloadJsしか使っていないので、しばらくはこの2つだけと言っていますが、実はこの2つだけで十分です.
次に、分析コードを開始します.
まずjsファイルを導入する
<script src="easeljs-0.7.1.min.js"></script>
<script src="preloadjs-0.4.1.min.js"></script>ステージの初期化を行います.
function init(){
stage = new createjs.Stage("cas");
C_W = stage.canvas.width;
C_H = stage.canvas.height;
var manifest = [
{src:"image/man.png" , id:"man"},
{src:"image/ground.png" , id:"ground"},
{src:"image/bg.png" , id:"bg"},
{src:"image/high.jpg" , id:"high"},
{src:"image/coins.png" , id:"coin"}
]
loader = new createjs.LoadQueue(false);
loader.addEventListener("complete" , handleComplete);
loader.loadManifest(manifest);
drawLoading();
}上でpreloadJsの方法を使って、1つのloaderを実例化して、ロードする必要があるピクチャーファイルをmanifestの中に置いて、ロードを行って、ロードが完成した後にコールバックhandleComplete関数を呼び出します:
function handleComplete(){ // load
var manImage = loader.getResult("man"),
lowground = loader.getResult("ground"),
highground = loader.getResult("high"),
bgImage = loader.getResult("bg"),
coins = loader.getResult("coin");
sky = new createjs.Shape();
sky.graphics.bf(bgImage).drawRect(0,0,C_W,C_H);
sky.setTransform(0, 0, 1 , C_H/bgImage.height);
stage.addChild(sky);
man = createMan(200,326,manImage);
//
kuang = new createjs.Shape();
kuang.graphics.beginStroke("rgba(255,0,0,0.5)").drawRect(0 , 0 , man.size().w , man.picsize().h*1.5);
// stage.addChild(kuang);
mapHandle(lowground , highground , coins);
createjs.Ticker.timingMode = createjs.Ticker.RAF;// ， requestAnimationFrame setTimeout
createjs.Ticker.setFPS(30);//
createjs.Ticker.addEventListener("tick", tick);//
window.addEventListener("keydown" , function(event){
event = event||window.event;
if(event.keyCode===32&&man.jumpNum<man.jumpMax){
man.jump();
}
})
}ロード完了バックエンドの画像データを取得するにはloaderを直接使用する.getResultは取得できます.クールなゲームには背景が必要です.だから、skyをインスタンス化してビットマップを描画します.bf法はbeginBitmapFillの略です.この方法はビットマップの描画を開始します.後ろのdrawRectはビットマップの描画領域です.領域はキャンバス全体ですから、drawRect(0,0,C_W,C_H)です.実例化されたskyはそのままステージに追加すればいいです.次に、キャラクタをインスタンス化し、createManメソッドの後に、自分でカプセル化したと言います.
そしてステージループの設定をして、上にコメントがあったら、言わないでください.
ステージ設定でmapHandleは地図データの初期化です.
var mapIndex = 0, //
Mix = 0, //
allStones = [], //
allCoins = [], //
showSt = []; //
function mapHandle(lowground , highground , coins){ //
allStones.length = 0;
var stoneImage = {"A":lowground , "B":highground},kind = null;
for(var i=0;i<30;i++){ //
switch(i){
case 0:kind="A";break;
case 10:kind="B";break;
case 20:kind="C";break;
}
var st = createStone(C_W , kind , stoneImage);
allStones.push(st)
}
for(var i=0;i<10;i++){ //
var coin = createCoin(coins);
allCoins.push(coin);
}
Mix = Math.floor(Math.random()*mapData.length); //
for(var i=0;i<8;i++){
setStone(false)
}
}
function setStone(remove){ //
var arg = mapData[Mix].charAt(mapIndex),
coarg = coinCode[Mix].charAt(mapIndex),
cc = null;
if(coarg==="#"){
for(var i=0;i<allCoins.length;i++){
if(!allCoins[i].shape.visible){
cc = allCoins[i];
cc.shape.visible = true;
break;
}
}
}
for(var z=0;z<allStones.length;z++){
if(!allStones[z].shape.visible&&allStones[z].kind===arg){
var st = allStones[z];
st.shape.visible = true;
st.shape.x = showSt.length===0?0:showSt[showSt.length-1].shape.x+showSt[showSt.length-1].w;
if(cc){
cc.shape.x = showSt.length===0?allStones[z].w/2-cc.size().w/2:showSt[showSt.length-1].shape.x+showSt[showSt.length-1].w+allStones[z].w/2-cc.size().w/2;
cc.shape.y = arg==="C"? C_H-loader.getResult("high").height-50 : allStones[z].shape.y-cc.size().h/2-50;
}
if(remove) showSt.shift();
showSt.push(st);
break;
}
}
mapIndex++;
if(mapIndex>=mapData[Mix].length){
Mix = Math.floor(Math.random()*mapData.length)
mapIndex=0;
}
}以下は人物モジュールのパッケージです
(function(w){
var FRAME_RATE = 13, //
SCALE_X = 1.5, //X
SCALE_Y = 1.5, //Y
GRAVITY = 3, //
JUMP_SPEED = 2.6, //
WIDTH = 40,
HEIGHT = 96,
PICWIDTH = 64,
PICHEIGHT = 64,
PROPORTION = 150/1; //
var Man = function(x , y , img){
this.x = x;
this.y = y;
this.endy = y;
this.vx = 0.5;
this.vy = 0;
this.ground = [];
this.state = "run";
this.jumpNum = 0;
this.jumpMax = 1;
this.init(img);
}
Man.prototype = {
constructors:Man,
init:function(img){
var manSpriteSheet = new createjs.SpriteSheet({ //
"images":[img],
"frames":{"regX":0,"height":PICWIDTH,"count":45,"regY":1,"width":PICHEIGHT},
"animations":{
"run":{
frames:[21,20,19,18,17,16,15,14,13,12], //
next:"run", //
speed:1, //
},
"jump":{
frames:[34,35,36,37,38,39,40,41,42,43],
next:"run",
speed:1,
},
"die":{
frames:[8,7,6,5,4,3,2,1,0],
next:"die",
speed:1,
}
}
});
this.sprite = new createjs.Sprite(manSpriteSheet , this.state); //
this.sprite.framerate = FRAME_RATE; //
this.sprite.setTransform(this.x, this.y, SCALE_X, SCALE_Y); //
stage.addChild(this.sprite); //
},
update:function(){
var sprite = this.sprite;
var time = createjs.Ticker.getInterval()/1000; //
if(this.state==="run"){
if(sprite.x<this.x){
sprite.x +=this.vx;
}else {
sprite.x = this.x
}
}
if(this.endy>sprite.y||this.state==="jump"){ //
var nexty = sprite.y+time*this.vy*PROPORTION;
this.vy += time*GRAVITY;
sprite.y += time*this.vy*PROPORTION;
if(Math.abs(sprite.y-this.endy)<10&&this.vy>0){
this.state = "run";
sprite.y=this.endy;
this.vy = 0;
}
}
if(sprite.x+(PICWIDTH*SCALE_X-WIDTH)/2<0||sprite.y>C_H+200){
this.die();
createjs.Ticker.reset();
alert("you are Die!");
}
switch(this.state){
case "run":
this.jumpNum = 0;
break;
case "die":
if(sprite.currentFrame===0){
sprite.paused = true;
}
break;
}
},
run:function(){
this.sprite.gotoAndPlay("run")
},
jump:function(){
this.vy = -JUMP_SPEED;
this.state = "jump";
this.sprite.gotoAndPlay("jump"); //
this.jumpNum++;
},
die:function(){
this.state = "die";
this.sprite.gotoAndPlay("die")
},
size:function(){
return {
w:WIDTH,
h:HEIGHT
}
},
picsize:function(){
return {
w:PICWIDTH,
h:PICHEIGHT
}
}
}
w.createMan = function(x , y , img){
return new Man(x , y , img)
};
})(window)人物のモジュールのカプセル化は简単なcreateJsのカプセル化の上で更なるカプセル化を行って、カプセル化はとても简単で、createJsで1つの精霊の类を実例化して、更に精霊の表をバインドして、上のコードの中で注釈があって、基本的にすべてはっきり言いました.
以下にパッケージされた石と金貨モジュールを貼り付け、簡単に言えば背景のループを実例化し、石と金貨を予め実例化し、応答した石を移動し、石が舞台を超えた領域に移動したとき、彼のvisible属性をfalseに設定し、最後の位置に石を追加して新しい移動を行う.金貨も同じです.地図データは予め定義された文字列によって実現される.
(function(w){
var SPEED = 4,
COIN_STAY_X = 20,
COIN_STAY_Y = 20,
COIN_STAY_WIDTH = 30,
COIN_STAY_HEIGHT = 30,
COIN_SCALE_X = 0.08,
COIN_SCALE_Y = 0.08;
//
var Stone = function(x,kind,allImage){
this.x = x;
this.kind = kind;
this.allImage = allImage;
this.init();
}
var sp = Stone.prototype;
sp.init=function(){
this.shape = new createjs.Shape();
if(this.kind!=="C"){
this.h = this.allImage[this.kind].height;
this.w = this.allImage[this.kind].width*2;
this.y = C_H - this.h;
this.shape.graphics.beginBitmapFill(this.allImage[this.kind]).drawRect(0, 0, this.w, this.h);
this.shape.setTransform(this.x, this.y, 1, 1);
}else {
this.h = -1000;
this.w = 170;
this.y = C_H - this.h;
this.shape.graphics.beginFill("#000").drawRect(0, 0, this.w, this.h);
this.shape.setTransform(this.x, this.y, 1, 1);
}
this.shape.visible = false;
this.shape.cache(0 , 0 , this.w , this.h);
stage.addChild(this.shape);
}
sp.update=function(){
this.shape.x -= SPEED;
}
//
var Coin = function(image){
this.sizeX = COIN_SCALE_X;
this.sizeY = COIN_SCALE_Y;
this.isget = false;
this.init = function(){
this.shape = new createjs.Shape();
this.shape.graphics.beginBitmapFill(image).drawRect(0, 0, image.width, image.height);
this.shape.setTransform(0, 0, COIN_SCALE_X, COIN_SCALE_Y);
this.shape.visible = false;
stage.addChild(this.shape);
}
this.init();
this.update = function(){
if(this.isget){
this.sizeX = this.sizeX + ((COIN_STAY_WIDTH/image.width) - this.sizeX)*0.1;
this.sizeY = this.sizeY + ((COIN_STAY_HEIGHT/image.height) - this.sizeY)*0.1;
this.shape.setTransform(
this.shape.x + (COIN_STAY_X - this.shape.x)*0.1,
this.shape.y + (COIN_STAY_Y - this.shape.y)*0.1,
this.sizeX,
this.sizeY
);
if(Math.abs(this.shape.x-COIN_STAY_X)<0.5&&Math.abs(this.shape.y-COIN_STAY_Y)<0.5){
this.shape.visible = false;
this.isget = false;
this.sizeX = COIN_SCALE_X;
this.sizeY = COIN_SCALE_Y;
this.shape.setTransform(0,0,this.sizeX,this.sizeY);
}
} else{
this.shape.x -= SPEED;
if(this.shape.x<-image.width*COIN_SCALE_X){
this.shape.visible = false;
}
}
}
this.size = function(){
return {
w:image.width*COIN_SCALE_X,
h:image.height*COIN_SCALE_Y
}
}
}
w.createCoin = function(image){
return new Coin(image)
}
w.createStone = function(x,kind,allImage){
return new Stone(x,kind,allImage);
}
})(window)パッケージング方法は上の人物モジュールとパッケージングの差は多くありませんが、人物は精霊類、石金貨は形状類を使います.ビットマップの描画によって、ビットマップの画像を描くのですが、原理は同じです.
最後に、ステージのフレーム単位処理のtickメソッドです.
function tick(event){ //
man.update();
kuang.x = man.sprite.x+(man.picsize().w*1.5-man.size().w)/2; //
kuang.y = man.sprite.y;
man.ground.length=0;
var cg = stoneHandle();
if(man.ground[0]&&!cg) {
man.ground.sort(function(a,b){return b.h-a.h});
man.endy = man.ground[0].y-man.picsize().h*1.5;
}
allCoins.forEach(function(cc , index){
if(cc.shape.visible){
if(
Math.abs((kuang.x+man.size().w/2) - (cc.shape.x+cc.size().w/2)) <= (man.size().w+cc.size().w)/2&&
Math.abs((kuang.y+man.size().h/2) - (cc.shape.y+cc.size().h/2)) <= (man.size().h+cc.size().h)/2&&
!cc.isget
){
cc.isget = true;
countCoin.innerHTML = parseInt(countCoin.innerHTML)+1
}
cc.update();
}
})
document.getElementById("showFPS").innerHTML = man.endy
stage.update(event)
}フレームごとの処理は、自分でゲームを書くように、ステージ内のすべてのオブジェクトを1つずつ論理演算し、対応する処理を行う.
基本的にcreateJsの使い方は比較的簡単で強力です.自分で車輪を作るより手間が省けます.
ソースアドレス:https://github.com/whxaxes/canvas-test/tree/gh-pages/src/Game-demo/runningMan