摘要:[AS3]從小遊戲學習之橫軸移動1(人物移動)
這篇看起來簡單不過的範例,SV可是想破頭、google了好久都沒有找到教學!
所以才會想辦法研究。
在做了兩個小遊戲(https://googledrive.com/host/0B7hg_8WvMyfJSFRPRlZIcDd2Yjg/index.html培根貓和https://googledrive.com/host/0B7hg_8WvMyfJdVhtYkpDYVpZSU0/index.html顏面的逃脫)後,終於想到要怎麼實作了!
首先一樣在場景加入判斷鍵盤使用的地方:
import flash.ui.Keyboard;
stage.addEventListener(KeyboardEvent.KEY_DOWN, walk);
stage.addEventListener(KeyboardEvent.KEY_UP, walkOnce);
walk是用來判斷使用者要往哪方向跑,walkOnce是防止使用者長按。
當然,你要讓使用者可以長按(按右鍵就連續跑)也是可以!只是參考了瑪莉歐的操作後,覺得click once還是比較人性(也比較好操控啦)。
(中間的bearR1以外的bear可以無視,那是之後做圖片切換用的)
function walk(event:KeyboardEvent):void
{
if(event.keyCode==Keyboard.UP)
{
//上鍵=跳
if(inUp==false)
isJump=true;
}
if(event.keyCode==Keyboard.LEFT)
{
//左鍵
if(inLeft==false)
isLeft=true;
}
if(event.keyCode==Keyboard.RIGHT)
{
//右鍵
if(inRight==false)
isRight=true;
}
if(isJump==true&&isRight==true)
{
//往右跳
if(inUp==false)
{
inUp=true;
jumpRLTimer.start();
}
}
else if(isJump==true&&isLeft==true)
{
//往左跳
if(inUp==false)
{
inUp=true;
jumpLLTimer.start();
}
}
else if(isJump==false&&isRight==true)
{
//右走
if(inRight==false)
{
inRight=true;
bearR1.x+=10;
}
}
else if(isJump==false&&isLeft==true)
{
//左走
if(inLeft==false)
{
inLeft=true;
bearR1.x-=10;
}
}
else if(isJump==true&&isRight==false)
{
//面向右跳
if(inUp==false)
{
inUp=true;
jumpRTimer.start();
}
}
else if(isJump==true&&isLeft==false)
{
//面向左跳
}
txLeft.text="isLeft:"+isLeft;
txRight.text="isRight:"+isRight;
txJump.text="isJump:"+isJump;
}
這邊只是範例~之後他會做更多變化!
原理就是先判斷使用者按了什麼鍵,然後看看是不是組合鍵再做移動的部分。
為了讓移動看起來有變化、很順暢,我使用了Timer:
//右跳
var speed:int=0;
var jumpRTimer:Timer = new Timer(25);
jumpRTimer.addEventListener(TimerEvent.TIMER, jumpRHandler);
function jumpRHandler(event:TimerEvent):void
{
bearR1.visible=true;
bearL1.visible=false;
bearL2.visible=false;
if(speed<16)
{
speed++;
bearR1.y-=5;
}
else if(speed>=16&&speed<32)
{
speed++;
bearR1.y+=5;
}
if(speed==32)
{
speed=0;
jumpRTimer.stop();
}
}
//右長跳
var speed2:int=0;
var jumpRLTimer:Timer = new Timer(25);
jumpRLTimer.addEventListener(TimerEvent.TIMER, jumpRLHandler);
function jumpRLHandler(event:TimerEvent):void
{
if(speed2<16)
{
speed2++;
bearR1.y-=5;
if(isRight==true)
{
bearR1.x+=3.75;
}
}
else if(speed2>=16&&speed2<32)
{
speed2++;
bearR1.y+=5;
if(isRight==true)
{
bearR1.x+=3.75;
}
}
if(speed2==32)
{
speed2=0;
jumpRLTimer.stop();
}
}
//左長跳
var speed3:int=0;
var jumpLLTimer:Timer = new Timer(25);
jumpLLTimer.addEventListener(TimerEvent.TIMER, jumpLLHandler);
function jumpLLHandler(event:TimerEvent):void
{
if(speed3<16)
{
speed3++;
bearR1.y-=5;
if(isLeft==true)
{
bearR1.x-=3.75;
}
}
else if(speed3>=16&&speed3<32)
{
speed3++;
bearR1.y+=5;
if(isLeft==true)
{
bearR1.x-=3.75;
}
}
if(speed3==32)
{
speed3=0;
jumpLLTimer.stop();
}
}
以上是部分範例~
如果單純左跳是還沒處理的。
一開始先以人物面向右為基本操作,日後再po會根據左右不同的圖片切換。
道理其實就是visible切換而已。
所以bearR1就是那張小熊圖。
我觀察了瑪莉歐,發現往上跳會跳到自己兩倍高的位置,而長按的話最遠往左右可以跳到自己三倍遠的位置。
我的基本方塊是40x40,所以是那樣計算的。
最後就是判斷使用者是否按下上鍵才能停止運動:
function walkOnce(event:KeyboardEvent):void
{
if(event.keyCode==Keyboard.UP)
{
//上鍵=跳
isJump=false;
inUp=false;
}
if(event.keyCode==Keyboard.LEFT)
{
//左鍵
isLeft=false;
inLeft=false;
}
if(event.keyCode==Keyboard.RIGHT)
{
//右鍵
isRight=false;
inRight=false;
}
txLeft.text="isLeft:"+isLeft;
txRight.text="isRight:"+isRight;
txJump.text="isJump:"+isJump;
}
結果就會像這樣:
https://googledrive.com/host/0B7hg_8WvMyfJMGRGazhZSUdzNm8/ClownBear.html
因為還是試做階段,可能操作還是有點卡卡的。不過已經可以讓大家繼續研究囉~
p.s.畫面左上角是用來debug用的,大家也可以操作看看變化~
因為以往的as2跟as3語法不同
我個人是覺得鍵盤控制上as3比as2好用(可能習慣的關係)~