« BlogPetの背景をつける « » コツのお話その5 インターフェース キー編 »

2006年03月02日

 コツのお話その5 インターフェース マウス編このエントリーを含むはてなブックマーク

このカテゴリはAAWなどのゲームとかを元に
これからFlashゲームを作る人とかゲームの仕組みに興味がある人に
僕の知ってることを中途半端ながら語ってみようというものです。
ちなみに今までの話はこちらから見れます。
ここで語ることはあくまで自己流なので注意。

今回はキーやマウスといったユーザーインターフェースのお話

Flashでゲームを作るときに失敗しやすいのはユーザーインターフェース、つまりマウスとキーボードの取り方です。
そもそもFlashはあまりゲームを作ることを目的にできていない(というかパソコンができていない)ので、システム的にあまりゲームに向いていないところがあります。
そういうのをどうカバーするか、色々挙げてみます。

キー編はこちら

マウスが画面外に出て動けなくなる
マウスでドラッグ、クリック、誘導するようなゲームはいっぱいあります。
ブロック崩しとか、普通のアクションゲームでもよくマウスで操作しています。
こんなゲームで一番気をつけなければいけないのは、画面の隅にマウスを持っていったときに間違えて画面外にマウスカーソルを出してしまうことです。
特にクリックが重要なゲームだとこのときクリックが効かなくなりますのでとっても問題です。

他に、特にマウスの左右に反応するようなゲーム(アクションゲームやブロック崩しなど)で、マウスカーソルを非表示にしていると、左右に動かしている間にだんだんマウスが上か下にずれていって、画面外にいきなり出てしまうことがあります。

こういうことを防ぐために、まず、マウスの位置を把握できるようにします。
マウスを表示するか、それが嫌ならせめて今マウスがどこにあるかわかるようなマークをつけてやりましょう(キャラが完全にマウスに追随する場合はそれがマークになるのでOK)
次にゲーム画面の周囲に、swfの余白を作ります。大体100pxくらい取っておくといいでしょう。
こうしておけば、その範囲までははみ出してもマウスが生きていますし、クリックも拾うことができます。

すでに作ってしまったFlashゲームに応急処置として余白を作ることができます。
まず、Flashの最初のフレームに表示を100%に固定する以下のASを書きます
Stage.scaleMode = "noScale"; // 100%に固定
Stage.align = "C"; // 中心に配置
次に公開用のHTMLのサイズの部分を縦横200px大きくします。
これで、ゲームを変えないまま余白を作ることができます。
画面外が見えてしまうので、MCでカバーを被せるなどしてください。

マウスの押したとき、離したとき
ボタンを扱う時に普通はon(release)を使います。
これは普通のパソコンのボタンが、押して離した時に反応するのに合わせたものです。
ところがゲームでは離した時に反応するのでは微妙に遅れてしまう場合があります。
特にタイミング系のゲームで、マウスを離した時に反応するようなASだと、かなりユーザーをイラつかせること間違い無しです。
ゲームでボタンを使う時は必要に応じてon(press)を使いましょう。

mouseDownとpressの違い
さて、さらにマウスを押したときというイベントには、ムービークリップのonClipEvent(mouseDown)もあります。
on(press)とのタイミングの違いは無いのですが、決定的に違うのはmouseDownのほうはムービークリップの範囲に関係なくイベントを取るということです。
ボタンのpressは範囲や重なっている場合の優先順位を自動的に処理しますが、mouseDownはそういうことをしてくれません。特に2つ以上のボタンが重なった時の処理はmouseDownで処理しようとするととても大変なことになります。
どうもmouseDownを無闇に使いたがる人がよくいるのですが、慣れていないうちは無理をしないでボタンのイベントに頼ったほうがいいと思います。

マウスの動きを使う場合。差分と慣性
ボールをつかんで投げられるようなFlashでは、マウスがボールを放した瞬間にボールがどっちへ飛ぶのかを決めるのですが、この方法には大きく2種類あります。
まず、前フレームのマウスの座標を記録しておいて、今の座標との差をボールの速度にする方法です。




ちょっと触ってもらえれば分かりますが、一見上手く動いているように見えます。
ただ、本当にごくまれに投げるのに失敗して真下に落としてしまいます。
これはパソコン操作に慣れていない人、fpsの高いFlashのほうが確率が高いのですが
投げる瞬間一瞬でもマウスが停止してしまうと速度が0と取られるために、ぽとっと不自然に落ちることがあるのです。
それに対してこのFlashは少し動きが違います。




マウスに対して少し遅れてついてきますが、これはマウスとボールをバネで結んだようなイメージです。
毎フレーム、マウスとの差を速度としてプラスし、前回の速度も一定割合で残します。
早い話が慣性があるわけですね。
こっちだと少し停止しても真下に落ちることが無く、投げる失敗もしにくくなります。
ただ、逆にバネのせいで反対側に飛ばしてしまうこともあります。

こういった処理は要所要所で使い分けるべきですが、1つのやりかたにも色々方法があるということですね。

キー編へ