這個範例, 為大家簡介在Flash 製作燒粟米遊戲, 並發佈於Android 和iOS 運行. 作者以
基本設定和
自定物件兩部分說明遊戲製作技巧:
 |
| 請按 [觀看] 範例 |
基本設定:
- 場景(Scene) 流程: 在Window -> Other Panels -> Scene 中, 自由加入需要的場景.
 |
| 場景流程: Logo → Intro → Game Play → Game Over |
- 提升顯示速度: 把圖案轉換成JPG/PNG 等格式, 或啟動Cache as Bitmap.
- 背景音樂(Background music): 把音樂放於時間軸上. 然後設定Sync: Stream, 這樣音樂與遊戲同步播放和停止. 其他的音效同樣可以這方式加入遊戲中.
- 利用時間軸製作粟米狀態: 關於狀態顯示, 作者喜歡多用Flash 時間軸製作, 既簡單又實用.
自定物件:
遊戲中每一個物件, 我們會編寫
繼承MovieClip, 它們成為獨特的物件, 在畫面負責一項功能, 與用戶產生互動. 範例製作以下幾個物件:
- CornCooking 物件 - 遊戲框架, 把所有自定物件連繫一起.
當加入新粟米時, 會執行addCorn 程序,
啟動粟米的拖拉(drag) 功能:public function addCorn(corn:Corn):void {
// <----- start action
corn.drag(this.stage);
// <----- add listener
corn.addEventListener(CornEvent.START_DRAG, startDragHandler);
corn.addEventListener(CornEvent.STOP_DRAG, stopDragHandler);
}
當粟米被按動時, 若測試重疊於Oven 上, 會加入至爐中,
否則會由Scoreboard 決定所得分數:private function stopDragHandler(event:CornEvent):void {
var corn:Corn = event.target as Corn;
var oven:CornOven = hitOven(corn);
if (oven != null) {
// <----- put to a oven
oven.corn = corn;
} else if (_scoreboard != null) {
// <----- earn a score
_scoreboard.addScore(corn);
// <----- destory the corn
corn.destory();
}
}
測試重疊程序, 是利用內建的hitTestObject 功能作判斷:private function hitOven(corn:Corn):CornOven {
for (var i:int = 0; i < _ovens.length; i++)
if (corn.hitTestObject(_ovens[i]))
if (_ovens[i].corn == null) // <----- is an available oven
return _ovens[i];
return null;
}
- CornOven
物件 - 火爐物件, 沒有實際顯示介面. 在遊戲中提供四個位置給用戶燃燒粟米.
當粟米加入爐中, 會把粟米顯示於爐的中心位置, 和啟動粟米的燃燒(burn) 功能:public function set corn(value:Corn):void {
if (_corn != null) {
// <----- clear last corn
_corn.removeEventListener(CornEvent.START_DRAG, startDragHandler);
_corn.removeEventListener(CornEvent.DESTORY, destoryHandler);
}
if(value!=null){
// <----- cache variable
_corn = value;
// <----- add to UI
_corn.x = 0;
_corn.y = 0;
this.addChild(_corn);
// <----- set action
_corn.burn();
// <----- add listener
_corn.addEventListener(CornEvent.START_DRAG, startDragHandler);
_corn.addEventListener(CornEvent.DESTORY, destoryHandler);
}
}
- Corn 物件 - 粟米物件, 提供不同狀態顯示 .
拖拉(drag) 功能是發動用戶的Mouse Down 與Mouse Up 的功能:public function drag(stage:Stage):void {
// <----- cache variable
_stage = stage;
// <----- start to drag
mouseDownHandler(null);
}
燃燒(burn) 功能是播放粟米在時間軸上的狀態:public function burn():void {
if (this.currentFrame < this.totalFrames)
this.play();
}
- CornScoreboard 物件 - 計分板, 處理粟米所得的分數, 和顯示總分數於螢幕右上方.
提供addScore 程序, 當傳入一個粟米(Corn), 判斷將會得到的分數:public function addScore(corn:Corn):int {
// <----- define variable
var value:int = 0;
// <----- earn a score from a corn
switch(corn.status) {
case Corn.STATUS_RAW:
value = -10;
break;
case Corn.STATUS_BEGINNING:
value = -5;
break;
case Corn.STATUS_MIDDLE:
value = -1;
break;
case Corn.STATUS_GOOD:
value = +10;
break;
case Corn.STATUS_FIRE:
value = -10;
break;
}
// <----- change the score
_score += value;
// <----- adjust value
if (_score < 0)
_score = 0;
// <----- cache variable
_lastScore = _score;
// <----- set UI
applyScore();
// <----- dispatch event
var e:CornEvent = new CornEvent(CornEvent.SCORING);
e.value = value;
this.dispatchEvent(e);
// <----- return the value
return value;
}
- CornScoring 物件 - 粟米得分效果.
當加入得分效果, 呼叫applyScore 來判斷顯示的顏色:private function applyScore():void {
if (_textField != null) {
_textField.textColor = _score>0?0x009900:0x990000;
_textField.text = (_score>0?"+":"")+_score.toString();
}
}
- CornTimer 物件 - 計時物件.
檢查時間軸是否完結, 然後發動GAME_OVER 事件給場景作改變:private function enterFrameHandler(event:Event):void {
if (this.currentFrame == this.totalFrames) {
// <----- stop UI
this.stop();
// <----- remove listener
this.removeEventListener(Event.ENTER_FRAME, enterFrameHandler);
// <----- dispatch event
this.dispatchEvent(new CornEvent(CornEvent.GAME_OVER));
}
}
我們除燒粟米外, 加入更多圖案和關卡, 變成一個好玩的燒烤遊戲喔.
大家可以 [
下載] 範例試試看.
