flash 遊戲設計筆記：人物行走一種做法

 

 

 

目前來講，我依然還不會做一個小遊戲出來。做遊戲需要知道很多東西，這個flash 只是一個自娛自樂的東西。要是看了誤導就別怪了。

好，製作這個東西之前，其實這篇文章有一些重複了，不過只是一種demo式的示範。通過鍵盤來控制控制一個人物走動。

上面是一張透明的png位元影像。有四個不同的方向。可以看到 基本上上下左右都齊全了。現在來。我們就來一起玩一下這個東西。

由於這個東西不涉及很強的物件導向 和重用性。因此看下面的代碼的時候需要注意一下。在這裡的目的，只是希望一起玩一下這個flash。

 

好廢話少說。有了這張圖，筆者就打算通過複製像素的方式來將這種圖片切成16份，每一份都代表了一張不同方向的不同步的圖片。

 

首先，先通過一個類，複製這張位元影像。返回一個二維數組。注意，裡面的類是可以進行修改。這裡放出一個比較簡單的。沒有擴充的

 

 package com.game<br />{<br />/* 切割位元影像類，返回一個二維數組*/<br />// version 1.0 版本<br />import flash.display.Sprite;<br />import flash.display.Bitmap;<br />import flash.display.BitmapData;<br />import flash.geom.*;<br />public class BitmapSplice<br />{<br />private var Step:Array=new Array();//存取步數數組<br />public function BitmapSplice()<br />{</p><p>}<br />//進行切割<br />public function Splice(bitmapdata:BitmapData,titleWidth:uint,titleHeight:uint):Array<br />{<br />var iWidth:int=bitmapdata.width /titleWidth;<br />var iHeight:int=bitmapdata.height /titleHeight;<br />for (var i:uint=0; i < titleHeight; i++)<br />{<br />var array:Array=new Array();<br />for (var j:uint=0; j < titleWidth; j++)<br />{<br />var tempBMP:BitmapData=new BitmapData(iWidth,iHeight,true,0x00000000);<br />tempBMP.copyPixels(bitmapdata,new Rectangle(j * iWidth,i * iHeight,iWidth,iHeight),new Point(0,0));<br />array.push(tempBMP);<br />}<br />this.Step.push(array);<br />}<br />bitmapdata.dispose();</p><p> return this.Step;</p><p>}<br />}<br />}

 

通過這個類，我們擷取到一個二維數組陣列。 下面我們就使用一個鍵盤來控制一下。

為了展示，只是方便示範一下。可以對其變更。後面的 有時間去放出其他的版本，因為不是一個遊戲，因此只能當是玩一下，學習裡面的填充位元影像的方法了。

package<br />{<br />import flash.display.MovieClip;<br />import flash.display.Sprite;<br />import flash.events.*;<br />import flash.display.Bitmap;<br />import flash.display.BitmapData;<br />import flash.ui.Keyboard;<br />import com.game.BitmapSplice;<br />public class Main extends MovieClip<br />{</p><p>private var array:Array;//儲存圖片序列的<br />private var bitmap:BitmapSplice;<br />private var Step:int=0;//步數<br />private var Direction:uint=0;//方向<br />private var speed:int=10;</p><p>private var Isup:Boolean;<br />private var Isdown:Boolean;<br />private var Isleft:Boolean;<br />private var Isright:Boolean;</p><p>private var bitmapdata:BitmapData=new Player(0,0);<br />private var contain:Sprite=new Sprite();</p><p>private var vx:Number;<br />private var vy:Number;<br />public function Main()<br />{<br />init();<br />}<br />//初始化<br />private function init():void<br />{<br />addChild(contain);<br />bitmap=new BitmapSplice();//切割位元影像<br />array=bitmap.Splice(bitmapdata,4,4);//將位元影像分成很多塊<br />addEventListener(Event.ENTER_FRAME,gameLoop);<br />keyboardListener();</p><p>}<br />//遊戲迴圈<br />private function gameLoop(event:Event):void<br />{<br />control();<br />paint();//繪製填充</p><p>}<br />//鍵盤監聽<br />private function keyboardListener():void<br />{<br />stage.addEventListener(KeyboardEvent.KEY_DOWN,KeyDownHandler);<br />stage.addEventListener(KeyboardEvent.KEY_UP,KeyUpHandler);<br />}<br />private function KeyDownHandler(event:KeyboardEvent):void<br />{<br />switch (event.keyCode)<br />{</p><p>case Keyboard.UP :<br />Isup=true;<br />break;</p><p>case Keyboard.DOWN :<br />Isdown=true;<br />break;</p><p>case Keyboard.LEFT :<br />Isleft=true;<br />break;</p><p>case Keyboard.RIGHT :<br />Isright=true;<br />break;</p><p>}<br />}<br />private function KeyUpHandler(event:KeyboardEvent):void<br />{<br />switch (event.keyCode)<br />{</p><p>case Keyboard.UP :<br />Isup=false;<br />break;</p><p>case Keyboard.DOWN :<br />Isdown=false;<br />break;</p><p>case Keyboard.LEFT :<br />Isleft=false;<br />break;</p><p>case Keyboard.RIGHT :<br />Isright=false;<br />break;</p><p>break;<br />}<br />}<br />//填充繪圖<br />private function paint():void<br />{<br />contain.graphics.clear();<br />contain.graphics.beginBitmapFill(array[Direction][Step]);<br />contain.graphics.drawRect(0,0,array[Direction][Step].width,array[Direction][Step].height);<br />contain.graphics.endFill();<br />}<br />//移動<br />private function Move(directtion:uint,dx:int,dy:int):void<br />{<br />Direction=directtion;<br />Step++;<br />vx=dx*speed;<br />vy=dy*speed;<br />if (Step>3)<br />{<br />Step=0;<br />}<br />contain.x+=vx;//產生位移<br />contain.y+=vy;//產生位移<br />}<br />private function control():void<br />{<br />if (Isup &&!Isdown && !Isleft &&!Isright)<br />{<br />Move(3,0,-1);<br />}<br />if (Isdown && !Isup && !Isleft &&!Isright)<br />{<br />Move(0,0,1);<br />}<br />if (Isleft && !Isup && !Isdown && !Isright)<br />{<br />Move(1,-1,0);<br />}<br />if (Isright && !Isup && !Isdown && !Isleft)<br />{<br />Move(2,1,0);<br />}<br />if (!Isup && !Isdown && !Isleft && !Isright)<br />{<br />Step=0;<br />}<br />}<br />}<br />}

 

代碼不是很長，這裡和上次切割位元影像的介紹是一樣的（可以到上次文章觀看 這裡不補充）。但是這次改變了一個方式來顯示位元影像。

介紹一下，位元影像顯示的方法。有幾種的方式，上次的一種就是採用Bitmap類顯示，通過addChild 加入顯示列表進行映像的顯示。而這次則通過繪圖API的方式來填充位元影像。後面，會繼續探討flash  10新增的著色器渲染一個位元影像。這裡暫時不討論。

//填充繪圖<br />private function paint():void<br />{<br />contain.graphics.clear();<br />contain.graphics.beginBitmapFill(array[Direction][Step]);<br />contain.graphics.drawRect(0,0,array[Direction][Step].width,array[Direction][Step].height);<br />contain.graphics.endFill();<br />}

主要使用繪圖API來繪製。這樣能夠顯示出一些位元影像出來了。

最後 貼上一個背景，看起來的效果。你就可以控制一個人物走動了

 （裝上一個背景，就可以騙人一下了）

 這個小程式，並不涉及到很高深的知識，在這裡筆者只是希望能夠帶給一點學習flash 的歡樂而這份歡樂就是我想分享的東西。