Utilisez une syntaxe de type ActionScript pour écrire du HTML5 - Partie 2, en utilisant Sprite pour implémenter l'animation-Tutoriel H5-php.cn

Utilisez une syntaxe de type ActionScript pour écrire du HTML5 - Partie 2, en utilisant Sprite pour implémenter l'animation

黄舟

Libérer： 2017-01-17 16:32:55

original

1227 Les gens l'ont consulté

Dans l'article précédent, j'ai imité as, ajouté les classes LBitmap et LBitmapData et les ai utilisées pour afficher des images statiques.
Cette fois, Sprite est utilisé pour afficher dynamiquement les images.
Toujours en suivant l'idée de traitement des objets d'affichage dans l'article précédent, ajoutez la classe LSprite et ajoutez la méthode show, comme suit :

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);  
    }  
}

Copier après la connexion

Parce que Sprite peut avoir des images et d'autres objets affichables, j'ai donc ajouté childList dans son constructeur pour enregistrer tous les objets qu'il contient. Ensuite, lorsque vous appelez sa propre méthode show, bouclez son LGlobal pour afficher ses sous-objets.
De cette façon, le code d'affichage des images de notre article précédent peut également être affiché à l'aide de Sprite. Le code est le suivant :

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);  
}

Copier après la connexion

Nous savons que Sprite en actionscript peut ajouter l'événement EnterFrame, using Pour afficher dynamiquement des images, je vais l'imiter ici, car la méthode show de la classe LSprite est en boucle constante, il me suffit donc d'appeler en permanence une méthode dans la méthode show pour la faire boucler.
Je suppose qu'il existe un tableau qui stocke toutes les méthodes qui bouclent continuellement, puis je peux boucler ce tableau dans la méthode show, réalisant ainsi la boucle de toutes les méthodes, voir ci-dessous

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);  
    }  
}

Copier après la connexion

De Bien sûr, supposer que cela ne suffit pas. Nous avons besoin d'une méthode pour ajouter cet événement cyclique, nous avons donc également besoin de la méthode addEventListener et de la méthode removeEventListener pour supprimer cet événement

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;  
            }  
        }  
    }

Copier après la connexion

Tout ce qui doit être ajouté. a été ajouté, continuez Ensuite, implémentons simplement un diagramme marchant d'un personnage
Tout d'abord, ajoutez quelques méthodes à la classe BitmapData pour changer l'emplacement de la zone affichée dans l'image, etc.

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;  
        }  
    }

Copier après la connexion

D'accord, préparez maintenant un diagramme de marche de personnage, laissez-le bouger

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;  
    }  
}

Copier après la connexion

Ce qui précède consiste à utiliser une syntaxe de type ActionScript pour écrire du HTML5 - la deuxième partie, en utilisant Sprite pour réaliser du contenu d'animation, veuillez faire attention vers PHP pour plus de contenu sur le site Web chinois (m.sbmmt.com) !