[AS3]從小遊戲學習之橫軸移動1(人物移動)

摘要:[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好用(可能習慣的關係)~