ActionScript のような構文を使用して html5 を作成する - パート 2、スプライトを使用してアニメーションを実装する-H5 チュートリアル-php.cn

ActionScript のような構文を使用して html5 を作成する - パート 2、スプライトを使用してアニメーションを実装する

黄舟

リリース： 2017-01-17 16:32:55

オリジナル

1221 人が閲覧しました

前回の記事では、それを真似してLBitmapクラスとLBitmapDataクラスを追加し、それらを使って静止画像を表示しました。
今回はSpriteを使って画像を動的に表示します。
前回の記事の表示オブジェクトを処理するというアイデアに従い、次のように LSprite クラスを追加し、show メソッドを追加します。

function LSprite(){  
    var self = this;  
    self.type = "LSprite";  
    self.x = 0;  
    self.y = 0;  
    self.visible=true;  
    self.childList = new Array()  
}  
LSprite.prototype = {  
    show:function (cood){  
        if(cood==null)cood={x:0,y:0};  
        var self = this;  
        if(!self.visible)return;  
        LGlobal.show(self.childList,{x:self.x+cood.x,y:self.y+cood.y});  
    },  
    addChild:function (DisplayObject){  
        var self  = this;  
        self.childList.push(DisplayObject);  
    }  
}

ログイン後にコピー

Sprite には画像やその他の表示可能なオブジェクトを含めることができるため、そのコンストラクター ChildList に追加しました。すべてのオブジェクトを保存するために使用されます。次に、独自の show メソッドを呼び出すときに、LGlobal をループしてサブオブジェクトを表示します。
このように、前回の記事で画像を表示するコードもSpriteを使って表示できることが分かりました。

function main(){  
    loader = new LLoader();  
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
    loader.load("1.png","bitmapData");  
}  
function loadBitmapdata(event){  
    var bitmapdata = new LBitmapData(loader.content);  
    var mapimg = new LBitmap(bitmapdata);  
      
    var backLayer = new LSprite();  
    addChild(backLayer);  
    backLayer.addChild(mapimg);  
}

ログイン後にコピー

actionscriptのSpriteにEnterFrameイベントを追加して動的に画像を表示できることが分かりました。これを真似してみましょう。LSprite クラスの show メソッドは常にループしているため、show メソッド内のメソッドを継続的に呼び出してループさせるだけで済みます。
常にループしているすべてのメソッドを格納する配列があると仮定します。その後、この配列を show メソッドでループすることで、すべてのメソッドのループが実現されます。

function LSprite(){  
    var self = this;  
    self.type = "LSprite";  
    self.x = 0;  
    self.y = 0;  
    self.visible=true;  
    self.childList = new Array()  
    self.frameList = new Array();  
}  
LSprite.prototype = {  
    show:function (cood){  
        if(cood==null)cood={x:0,y:0};  
        var self = this;  
        if(!self.visible)return;  
        LGlobal.show(self.childList,{x:self.x+cood.x,y:self.y+cood.y});  
        self.loopframe();  
    },  
    loopframe:function (){  
        var self = this;  
        var key;  
        for(key in self.frameList){  
            self.frameList[key]();  
        }  
    },  
    addChild:function (DisplayObject){  
        var self  = this;  
        self.childList.push(DisplayObject);  
    }  
}

ログイン後にコピー

もちろん、ただ仮定するだけでは十分ではありません。このループイベントを追加するためのメソッドが必要なので、このイベントを削除するための addEventListener メソッドと、removeEventListener メソッドも必要です

addEventListener:function (type,listener){  
        var self = this;  
        if(type == LEvent.ENTER_FRAME){  
            self.frameList.push(listener);  
        }  
    },  
    removeEventListener:function (type,listener){  
        var self = this;  
        var i,length = self.frameList.length;  
        for(i=0;i<length;i++){  
            if(type == LEvent.ENTER_FRAME){  
                self.frameList.splice(i,1);  
                break;  
            }  
        }  
    }

ログイン後にコピー

次に、キャラクターの歩行チャートを単純に実装してみましょう。まずはBitmapDataクラスに画像表示領域の位置などを変更するメソッドをいくつか追加します

LBitmapData.prototype = {  
        setProperties:function (x,y,width,height){  
            var self = this;  
            self.x = x;  
            self.y = y;  
            self.width = width;  
            self.height = height;  
        },  
        setCoordinate:function (x,y){  
            var self = this;  
            self.x = x;  
            self.y = y;  
        }  
    }

ログイン後にコピー

さて、キャラクターの歩く絵を用意して動かしてみます

var list = new Array();  
var index = 0;  
var mapimg;  
var loader  
var imageArray;  
var animeIndex = 0;  
var dirindex = 0;  
var dirarr = new Array({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1});  
function main(){  
    loader = new LLoader();  
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
    loader.load("1.png","bitmapData");  
}  
function loadBitmapdata(event){  
    var bitmapdata = new LBitmapData(loader.content,0,0,70,92);  
    imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8);  
    mapimg = new LBitmap(bitmapdata);  
    mapimg.x = 100;  
    mapimg.bitmapData.setCoordinate(0,0);  
    index = 0;  
    var backLayer = new LSprite();  
    addChild(backLayer);  
    backLayer.addChild(mapimg);  
    backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)  
}  
  
  
function onframe(){  
    index++;  
    if(index >= imageArray[0].length){  
        index = 0;  
    }  
    mapimg.bitmapData.setCoordinate(imageArray[dirindex][index].x,imageArray[dirindex][index].y);  
      
    mapimg.x += dirarr[dirindex].x*3;  
    mapimg.y += dirarr[dirindex].y*3;  
    if(animeIndex++ > 20){  
        dirindex++;  
        if(dirindex > 3)dirindex = 0;  
        animeIndex = 0;  
    }  
}

ログイン後にコピー

上記はActionScript風の構文で記述していますhtml5 - パート 2、スプライトを使用してアニメーションコンテンツを実現するその他の関連コンテンツについては、PHP 中国語 Web サイト (m.sbmmt.com) に注目してください。