キーボード入力

(サンプル一覧を表示する)

FlashDevelop を使って、キーボード入力に反応する処理を入れてみました。

矢印キーを押すと画面上の画像が動きます。
左上に動かす等、2 つ以上のキーの同時押しには対応していません。
Flash の実行画面
キーボード入力

Flashプレーヤーが入っていないか、JavaScriptが無効になっているようです。

Get Adobe Flash player

キーボード入力
矢印キーを押して、反応を見てみてください。
簡単な処理しか入れていないので、
キーの同時押しには対応していません。
Flash がアクティブになっていないと反応しないので、
一度枠の中をクリックしてください。

ソースコード

package 
{
	import flash.display.Bitmap;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.KeyboardEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.ui.Keyboard;
	
	/**
	 * キーボード入力のテスト
	 * @author Hikipuro
	 */
	public class Main extends Sprite 
	{
		/**
		 * 埋め込み画像
		 */
		[Embed(source='../image/test001.png')]
		private var image1:Class;
		
		/**
		 * 動かす画像
		 */
		private var bitmap:Bitmap;
		
		/**
		 * メッセージ表示用テキストフィールド
		 */
		private var textField:TextField;
		
		/**
		 * コンストラクタ
		 */
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		/**
		 * 初期化イベント
		 * @param	e
		 */
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			// entry point
			
			bitmap = Bitmap(new image1);
			RegisterBitmap(bitmap, 100, 70, 2.0);
			
			textField = new TextField();
			textField.autoSize = TextFieldAutoSize.LEFT;
			textField.x = 5;
			textField.y = 5;
			addChild(textField);
			
			stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
			stage.addEventListener(KeyboardEvent.KEY_UP, onKeyUp);
		}
			
		/**
		 * ステージにビットマップを登録して表示する
		 * @param	bitmap	表示するビットマップ
		 * @param	x		X 座標
		 * @param	y		Y 座標
		 * @param	scale	拡大率
		 */
		private function RegisterBitmap(bitmap:Bitmap, x:int, y:int, scale:Number):void
		{
			bitmap.smoothing = true;
			bitmap.cacheAsBitmap = true;
			bitmap.x = x;
			bitmap.y = y;
			bitmap.scaleX = scale;
			bitmap.scaleY = scale;
			addChild(bitmap);
		}
		
		/**
		 * キーが押された時のイベント
		 * @param	event
		 */
		public function onKeyDown(event:KeyboardEvent):void
		{
			// 左キーが押された時は左に、右キーが押された時は右へ移動
			if (event.keyCode == Keyboard.LEFT) {
				bitmap.x -= 5;
				textField.text = "左キーが押されました";
			} else if (event.keyCode == Keyboard.RIGHT) {
				bitmap.x += 5;
				textField.text = "右キーが押されました";
			}
			
			// 上キーが押された時は上に、下キーが押された時は下へ移動
			if (event.keyCode == Keyboard.UP) {
				bitmap.y -= 5;
				textField.text = "上キーが押されました";
			} else if (event.keyCode == Keyboard.DOWN) {
				bitmap.y += 5;
				textField.text = "下キーが押されました";
			}
		}
		
		/**
		 * キーが離された時のイベント
		 * @param	event
		 */
		public function onKeyUp(event:KeyboardEvent):void
		{
			if (event.keyCode == Keyboard.LEFT) {
				textField.text = "左キーが離されました";
			} else if (event.keyCode == Keyboard.RIGHT) {
				textField.text = "右キーが離されました";
			}
			if (event.keyCode == Keyboard.UP) {
				textField.text = "上キーが離されました";
			} else if (event.keyCode == Keyboard.DOWN) {
				textField.text = "下キーが離されました";
			}
			
		}
	}
	
}		

Flash のキーボードイベントは、押された/離された キーの情報を 1 つだけ取得するような構造になっているので、2 つ以上のキーの同時押しの判定処理は自分で書く必要があります。

具体的には、キーが押された瞬間、どのキーが押されたかという情報を Boolean 変数に保存 (True) しておき、次にそのキーが離された瞬間、対応するキーの Boolean 変数に逆の値を入れる (False) ような感じで保存します。実際にキーの ON・OFF に反応する処理は、EnterFrame イベント内で、キーに対応した Boolean 変数の値を判定してから行います。

こうすることで、用意した変数の数だけ同時にキーの押下判定を行うことができます。全てのキーイベントを捕らえようと思うと、 250 個程度の Boolean 変数が必要になります。250 個全てを毎フレーム保存しても、 ActionScript3 では目立って重くなることはありませんが、ゲーム等、タイミングにシビアなコンテンツを作るときには、必要なキーだけを保存するようにしたほうが良いと思います。

また、キーボードは 3 つ以下程度の同時押しにしか反応することができません。4 つ以上のキーを同時に押すと、4 つ目以降が無視されます。組み合わせによっては、2 つまでしか認識しないこともあります。Ctrl キーや Shift キーなど、補助的なキーは同時押しがしやすいようになっているようです。


ゲームを作るならジョイスティックに反応するような構造にしたいところですが、 Flash からは直接操作できないようです。 OS で受け取ったジョイスティックのボタン情報をキーボードの入力に変換する 「JoyToKey」 というソフトもあるので、イベント等で Flash 作品を展示したい方は探してみてください。

アナログスティックのようなデバイスをどうしても直接操作したい場合は、Flash コンポーネントを C# や VB のフォームに貼り付けて、.Net 側から Win32API を呼び出すというようなこともできます。その場合、Flash 側と .Net 側の通信には ExternalInterface を使います。これは、ブラウザ上では JavaScript と通信するためのクラスですが、.Net に貼り付けた場合は、.Net の言語と通信することができます。ただし、ExternalInterface は通常のメソッド呼び出しに比べて負荷が高いので、1 秒間にゲームのフレーム数と同じくらい (30 〜 60 くらい?) の呼び出し回数に留めておいた方が良いと思います。

参照

外部リンク