ActionScript 3
खेल विकास मूल बातें

परिचय

आइसोमेट्रिक कैरेक्टर एनिमेटिंग + मूवमेंट

: इस उदाहरण में प्रयुक्त अवधारणाएँ:

No संसाधन: ^{(व्यावसायिक उद्देश्यों के लिए इस संसाधन का उपयोग करने की अनुमति नहीं)}

Comments कोड और टिप्पणियाँ:

नोट: FPS 15 इस ट्यूटोरियल के लिए उपयोग किया जाता है, इसकी अनुशंसा की जाती है, लेकिन यदि आपको अधिक की आवश्यकता है, तो आपको अपने स्वयं के द्वारा कोड के कुछ भाग को संशोधित करना होगा।

सबसे पहले हमें अपने संसाधनों को बाहरी यूआरएल से डाउनलोड करना होगा।

const src_grass_tile_url:String = "https://i.stack.imgur.com/sjJFS.png";
const src_character_atlas_url:String = "https://i.stack.imgur.com/B7ztZ.png";

var loader:Loader = new Loader();
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, setGround);
loader.load(new URLRequest(src_grass_tile_url));

एक बार src_grass_tile_url लोड होने और उपयोग के लिए तैयार हो जाने के बाद src_grass_tile_url को बंद कर दिया जाएगा। संसाधन प्राप्त करने के लिए setGround को लागू करने में इसका पालन करें और इसे गेम बैकग्राउंड के रूप में ड्रा करें

function setGround(e:Event):void {
    /* drawing ground */
    /* loader is a displayObject, so we can simply draw it into the bitmap data*/
    /* create an instance of Bitmapdata with same width and height as our window*/
    /* (also set transparent to false because grass image, does not contains any transparent pixel) */
    var grass_bmd:BitmapData = new BitmapData(loader.width, loader.height, false, 0x0);
    /* time to draw */
    grass_bmd.draw(loader); // drawing loader into the bitmapData
    /* now we have to draw a tiled version of grass_bmd inside a displayObject Sprite to displaying 
       BitmapData on stage */
    var grass_sprite:Sprite = new Sprite();
    // for drawing a bitmap inside sprite, we must use <beginBitmapFill> with graphic property of the sprite
    // then draw a full size rectangle with that Fill-Data
    // there is a repeat mode argument with true default value so we dont set it true again.
    // use a matrix for scalling grass Image during draw to be more cute!
    var mx:Matrix = new Matrix();
    mx.scale(2, 2);
    grass_sprite.graphics.beginBitmapFill(grass_bmd, mx);
    grass_sprite.graphics.drawRect(0, 0, stage.stageWidth, stage.stageHeight);
    // now add sprite to displayobjectcontainer to be displayed
    stage.addChild(grass_sprite);
    
    // well done, ground is ready, now we must initialize our character
    // first, load its data, i just re-use my loader for loading new image, but with another complete handler (setCharacter)
    // so remove existing handler, then add new one
    loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, setGround);
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, setCharacter);
    loader.load(new URLRequest(src_character_atlas_url));
}

कोड अच्छी तरह से लानत टिप्पणी की है, के बाद हम जमीन के साथ किया है, इसके चरित्र को लागू करने का समय। चरित्र में एक संसाधन भी होता है जिसे उसी तरीके से लोड किया जाना चाहिए। इतना के अंत में setGround हम करने के लिए जा रहे हैं setCharacter एक और पूरा कॉल वापस आ गया है जो।

function setCharacter(e:Event):void {
    // let assuming that what is really character!
    // a set of images inside a single image!
    // that images are frames of our character (also provides movement for different directions)
    // first load this
    var character_bmd:BitmapData = new BitmapData(loader.width, loader.height, true, 0x0); // note character is transparent
    character_bmd.draw(loader);
    // take a look at sprite sheet, how many frames you see?
    // 42 frames, so we can get width of a single frame
    const frame_width:uint = character_bmd.width / 42; // 41 pixels
    // as i show you above, to displaying a BitmapData, we have to draw it using a DisplayObject,
    // another way is creating a Bitmap and setting its bitmapdata
    var character_bmp:Bitmap = new Bitmap(character_bmd);
    // but its not enough yet, a movieClip is necessary to cliping and animating this bitmap (as a child of itself)
    var character_mc:MovieClip = new MovieClip();
    character_mc.addChild(character_bmp);
    character_bmp.name = "sprite_sheet"; // setting a name to character_bmp, for future accessing
    character_mc.scrollRect = new Rectangle(0, 0, frame_width, character_bmd.height); // cliping movieclip, to dusplaying only one frame
    character_mc.name = "character"; // setting a name to character_mc, for future accessing
    stage.addChild(character_mc); // adding it to stage.
    // well done, we have a character, but its static yet! 2 steps remaining. 1 controlling 2 animating
    // at first setting a control handler for moving character in 8 directions.
    stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDown);
    stage.addEventListener(KeyboardEvent.KEY_UP, keyUp);
}

अब चरित्र नियंत्रक के लिए तैयार है। यह अच्छी तरह से प्रदर्शित और नियंत्रित करने के लिए तैयार है। इसलिए कोड के रूप में तीर कुंजियों के लिए कीबोर्ड कीबोर्ड अटैच और सुनना:

// we storing key stats inside <keys> Object
var keys:Object = {u:false, d:false, l:false, r:false};
function keyDown(e:KeyboardEvent):void {
    switch (e.keyCode) {
        case 38: //up
            keys.u = true;
            break;
        case 40: //down
            keys.d = true;
            break;
        case 37: //left
            keys.l = true;
            break;
        case 39: //right
            keys.r = true;
            break;
    }
}
function keyUp(e:KeyboardEvent):void {
    switch (e.keyCode) {
        case 38: //up
            keys.u = false;
            break;
        case 40: //down
            keys.d = false;
            break;
        case 37: //left
            keys.l = false;
            break;
        case 39: //right
            keys.r = false;
            break;
    }
}

keys:Object प्रत्येक एरो की के अनुसार 4 बूलियन वैरिएबल को स्टोर करता है, मूविंग प्रॉसेस को गेम के अपडेट (लूप) फंक्शन के अंदर किया जाना चाहिए, इसलिए हमें इसके लिए कीबोर्ड स्टैट पास करना होगा। लूप फ़ंक्शन को लागू करने देता है।

// initialize game Loop function for updating game objects
addEventListener(Event.EXIT_FRAME, loop);

// speed of character movement
const speed:Number = 5;
// this function will be called on each frame, with same rate as your project fps
function loop(e:Event):void {
    if (keys.u) stage.getChildByName("character").y -= speed;
    else if (keys.d) stage.getChildByName("character").y += speed;
    if (keys.l) stage.getChildByName("character").x -= speed;
    else if (keys.r) stage.getChildByName("character").x += speed;
}

गति एक सहायक स्थिरांक है, जो चरित्र के वेग को परिभाषित करती है। उपरोक्त कोड इस प्राथमिकता के साथ एक सरल 8 दिशा आंदोलन को प्रस्तुत करता है निम्न: Up > Down Left > Right । इसलिए यदि ऊपर और नीचे तीर को एक ही समय में दबाया जाता है, तो चरित्र केवल ऊपर की ओर बढ़ता है (ठंड नहीं)।

बहुत बढ़िया!!! केवल एक कदम शेष, एनीमेशन, इस ट्यूटोरियल का सबसे महत्वपूर्ण हिस्सा

वास्तव में एनीमेशन क्या है? कीफ्रेम का एक सेट जिसमें कम से कम एक फ्रेम होता है
हमारी keyframs ऑब्जेक्ट बनाने की सुविधा देता है, जिसमें keyframes का नाम होता है
और इस कीफ़्रेम के फ्रेम को शुरू करने और समाप्त करने के बारे में भी कुछ डेटा
नोट , आइसोमेट्रिक गेम्स में, प्रत्येक की-फ़्रेम में 8 दिशा होती है (फ़्लिपिंग के उपयोग के साथ घटाकर 5 की जा सकती है)

var keyframs:Object = {
    idle: {up:[0,0], up_right:[1,1], right:[2,2], down_right:[3,3], down:[4,4]}, // [2,2] means start frame is 2 and end frame is 2
    run: {up:[5,10], up_right:[11,16], right:[17,22], down_right:[23,28], down:[29,34]}
};

हमें शेष फ़्रेमों को अनदेखा करना चाहिए, यह उदाहरण केवल निष्क्रिय और रन एनीमेशन प्रदान करता है
उदाहरण के लिए दिशा सही के साथ निष्क्रिय एनीमेशन की शुरुआत फ्रेम है, यह है: <keyframs.idle.right [0]>
अब एनिमेटर फ़ंक्शन को लागू करने देता है

var current_frame:uint;
function animate(keyframe:Array):void {
    // how it works
    // just called with a keyframe with direction (each frame),
    // if keyframe is what is already playing, its just moved to next frame and got updated (or begning frame for loop)
    // other wise, just moved to begining frame of new keyframe
    if (current_frame >= keyframe[0] && current_frame <= keyframe[1]) { // check if in bound
        current_frame++;
        if (current_frame > keyframe[1]) // play back if reached
            current_frame = keyframe[0];
    } else {
        current_frame = keyframe[0]; // start new keyframe from begining
    }
    // moving Bitmap inside character MovieClip
    var character:MovieClip = stage.getChildByName("character") as MovieClip;
    var sprite_sheet:Bitmap = character.getChildByName("sprite_sheet") as Bitmap;
    sprite_sheet.x = -1 * current_frame * character.width;
}

उपरोक्त फ़ंक्शन की टिप्पणियों को पढ़ें, हालांकि इस फ़ंक्शन का मुख्य काम चरित्र MovieClip अंदर sprite_sheet Bitmap को स्थानांतरित करना है ।

हम जानते हैं कि प्रत्येक अद्यतन लूप फ़ंक्शन के अंदर किया जाना चाहिए, इसलिए हम संबंधित कीफ़्रेम के साथ लूप से इस फ़ंक्शन को आमंत्रित करेंगे। यह अद्यतन लूप फ़ंक्शन है:

// speed of character movement
const speed:Number = 8;
var last_keyStat:Object = {u:false, d:false, l:false, r:false}; // used to getting a backup of previous keyboard stat for detecting correct idle direction
// this function will be called on each frame, with same rate as your project fps
function loop(e:Event):void {
    if (keys.u) stage.getChildByName("character").y -= speed;
    else if (keys.d) stage.getChildByName("character").y += speed;
    if (keys.l) stage.getChildByName("character").x -= speed;
    else if (keys.r) stage.getChildByName("character").x += speed;
    
    // animation detection
    if (keys.u && keys.l) { animate(keyframs.run.up_right); flip(true); }
    else if (keys.u && keys.r) { animate(keyframs.run.up_right); flip(false); }
    else if (keys.d && keys.l) { animate(keyframs.run.down_right); flip(true); }
    else if (keys.d && keys.r) { animate(keyframs.run.down_right); flip(false); }
    else if (keys.u) { animate(keyframs.run.up); flip(false); }
    else if (keys.d) { animate(keyframs.run.down); flip(false); }
    else if (keys.l) { animate(keyframs.run.right); flip(true); }
    else if (keys.r) { animate(keyframs.run.right); flip(false); }
    else {
        // if character dont move, so play idle animation
        // what is the best practice to detecting idle direction?
        // my suggestion is to sotring previous keyboard stats to determining which idle direction is correct
        // do any better thing if possible (absolutely is possible)
        // i just simply copy it from above, and replaced (keys) with (last_keyStat) and (run) with (idle)
        if (last_keyStat.u && last_keyStat.l) { animate(keyframs.idle.up_right); flip(true); }
        else if (last_keyStat.u && last_keyStat.r) { animate(keyframs.idle.up_right); flip(false); }
        else if (last_keyStat.d && last_keyStat.l) { animate(keyframs.idle.down_right); flip(true); }
        else if (last_keyStat.d && last_keyStat.r) { animate(keyframs.idle.down_right); flip(false); }
        else if (last_keyStat.u) { animate(keyframs.idle.up); flip(false); }
        else if (last_keyStat.d) { animate(keyframs.idle.down); flip(false); }
        else if (last_keyStat.l) { animate(keyframs.idle.right); flip(true); }
        else if (last_keyStat.r) { animate(keyframs.idle.right); flip(false); }
    }
    // update last_keyStat backup
    last_keyStat.u = keys.u;
    last_keyStat.d = keys.d;
    last_keyStat.l = keys.l;
    last_keyStat.r = keys.r;
}

टिप्पणियों को पढ़ें, हम कीबोर्ड कीबोर्ड के माध्यम से केवल एक सही keyframe का पता लगा रहे हैं। फिर निष्क्रिय एनीमेशन का पता लगाने के लिए भी ऐसा ही करें। निष्क्रिय एनिमेशन के लिए हमारे पास कोई महत्वपूर्ण इनपुट नहीं है जो यह पता लगाने के लिए कि किस दिशा का चरित्र चालू है, इसलिए एक simle सहायक चर कीबोर्ड की पिछली स्थिति (last_keyStat) को संग्रहीत करने के लिए आसान हो सकता है।

एक नया फ़ंक्शन flip जो एक अन्य सहायक फ़ंक्शन है जिसका उपयोग लापता एनिमेशन के अनुकरण के लिए किया जाता है (बाएं + up_left + down_left) यह फ़ंक्सन कुछ सुधार भी करता है जो नीचे टिप्पणी की गई है:

// usage of flip function is because of Movieclip registration point, its a fix
// as the registration point of MovieClip is not placed in center, when flipping animation (for non existing directions inside spritesheet)
// character location changes with an unwanted value equal its width, so we have to prevent this and push it back or forward during flip
function flip(left:Boolean):void {
    var character:MovieClip = stage.getChildByName("character") as MovieClip;
    if (left) {
        if (character.scaleX != -1) {
            character.scaleX = -1;
            character.x += character.width; // comment this line to see what happen without this fix
        }
    } else {
        if (character.scaleX != 1) {
            character.scaleX = 1;
            character.x -= character.width; // comment this line to see what happen without this fix
        }
    }
}

हमारा काम यहां खत्म हो रहा है। संपादक के लिए विशेष धन्यवाद, जो इस ट्यूटोरियल को और अधिक अप्रतिस्पर्धी बना रहा है। यहां भी इस ट्यूटोरियल का लाइव डेमो है और साथ ही पूर्ण कोड का एक बाहरी लिंक भी है।

Ferences बाहरी संदर्भ:

• पूरा कोड
• लाइव डेमो