キャラクターに簡単な加速度をつける

今日はちょっとした小技の紹介です。キャラクターを動かすときに簡単な加速度みたいなものをつける方法です。

2D横スクロールゲームを作るときに

のような感じでキャラクターの座標に直接数値を足してしまうのは良くありません。特にジャンプ中に方向転換するとカクカクした動きになってしまいます(ファミコンの北斗の拳みたいな感じ)。

それを滑らかにする方法がこちら

だいぶ省略してますが、イメージは伝わると思います。

move_xという移動値を入れる変数を用意します。そして押した方向に対して右なら+、左ならーの値を加算します。そしてそれを移動値としてプレイヤーの座標に加算します。

これによって反対方向を押した瞬間に反対に動くということはなくなり、また、同じ方向を押し続けることで移動値が増え加速しているように見えます。

もちろんこれはキャラクターをジャンプさせるときにも応用できます。

今回は単純に1ずつ加減算してますが、もっと本格的な感じに見せるためには値を工夫する必要が出てきます。いろいろな方法があるようなので探してみると面白いかもしれませんね。

 

以上、小技紹介でした(‘ω’)ノ

画面のフェードアウト処理【enchant.js】

enchantjs講座

ゲームを作っていて画面遷移時に絶対欲しいのがフェードアウト処理です。このフェードアウト処理がないと突然画面が切り替わり、あまりにも不自然に感じてしまいます。

フェードアウト処理はopacityという透明度のプロパティを使います。これは1が不透明(見える)で0が透明(見えない)です。なので簡単に説明すると黒い画像を用意してこれが透明から不透明に変わっていけばフェードアウトしていっているように見えるわけです。

サンプルプログラム

まず、

のように画面サイズとともに色を指定してFadeOutクラスを作成します(色を指定できるようにしているので白や赤など状況によって使い分けられます)。

initializeでは指定の色とサイズのコンテキストの作成などの初期化処理をします。

startメソッドはフェードアウトを開始したい場所に書きます。

doメソッドはメインループ内に書いておきます。isStartフラグがtrueになるとフェードアウトを開始します。ループ毎に指定されたスピードでフェードアウトします。終わったらtrueを返します。

 

以上の方法で簡単にフェードアウトさせることができます(‘ω’)ノ

バーチャルキーパッドの作り方【enchant.js】

enchantjs講座

スマホ向けゲームを作っていると指でポチポチするだけの単純なゲームになりがちです(批判してるわけではないですよ。ただ類似ゲームばかり・・・)

なので今回はバーチャルキーパッドを自作します。しかも、自分で言うのも何ですが、これ結構すごいです。ブラウザ上でも同時押しとか普通にできちゃいます(私ができるようにしたわけではなく、できるということが分かっただけなんですが(^^;))。ここではenchant.jsでの作り方ですが基本ノウハウが分かれば違う環境でも簡単に作ることができると思うので興味のある方は是非読んでいってください。

ちなみに今回の内容はスマホでの使用が前提ですが、キーボードでも操作可能です。矢印キーとZ、Xキーで操作できるようにします。というか、キーボードでの操作とくっつけてしまうことが一番の肝です!!

用意するもの

f:id:inwan:20180326203607p:plain
方向キー用の画像とA・Bボタン用の画像を用意します。大きさは好きにしてください。私のは方向キーは300px、ボタンは150pxで作ってます。(上の画像は方向キーボタンとボタンが押された状態のものです)

各ボタンの変数

まずはバーチャルパッドではなく、キー入力から説明します。
キーの入力はGameオブジェクトのinput要素に保存されます。方向キーはinput.right、input.left、input.up、input.downにそれぞれ押したらtrue、押されていなければfalseが入ります。ボタンはちょっと違って、あらかじめ

でaボタンにキーボードのボタンを結び付けます。90はZキーのアスキーコードです。違うボタンが良ければアスキーコードを調べて変えてください(‘ω’)ノ
こっちのボタンも方向キーと同様な感じでinput.aにtrueまたはfalseが入ります。

方向入力

方向の入力を簡単に判断できるようにビット演算的な感じで上なら「0001」、右なら「0010」、下「0100」、左「1000」にして数値を当てはめます。

予約語的な感じで作っておくとわかりやすくてよいです。
であとは押されたボタンの数値を足すと方向が出ます。

あとはswitch文で分岐を作ってやればOK。これで左右同時押しなどおかしな入力は無視できます。

ボタンの判定

ボタンの判定は単純に

でOKです。ただし、完ぺきではありません。なぜかというと、いつ押したか、いつ離したか、押したままなのか、離したままなのかということが分からないからです。

なのでもう一つ、直前のボタンの状態を所持する変数を作っておきます

で、ボタンの処理のたびに前回はどうだったか?という分岐を書いてやると今押したのか、押したままだったのかということが分かるということです(‘ω’)ノ

バーチャルキーパッド

さて、ここからやっとバーチャルキーパッドの話になります(´∀`)とりあえず画面の好きなところに用意した画像を表示させてください。
で、実はこれは私が最初javascriptを勉強し始めるときに読んだ田中賢一郎さんの「ゲームで学ぶjavascript入門」参考にしています。

なのでプログラムを丸パクリに書いてしまうわけにもいかないのでここはサラッと説明します(;’∀’)

まず、マウスのクリック位置のevent.x、event.yとキーパッド画像の中心からの距離を出します。そしてそれの絶対値を出します。すると下図のようなグラフで考えられるようになります。

f:id:inwan:20180326213749p:plain
キーパッドの中心を原点として、x座標、y座標を比較してx > yなら右、y > xなら上と判断できます。で、あとはxとyが+かーかで左右、または上下の判断をします(わかるかな(^^;))
ちなみに、この方法だと2x > yとか2y > xとかの条件で8方向も簡単に作れます。

バーチャルキーパッドをキー入力に合わせる

で、最後にバーチャルパッドをキー入力に合わせるようにします。そうするとキー入力の処理のプログラムを書くだけで済みます。

こんな感じで単純にaボタンがクリックされたらキーボード入力の対応ボタンをtrueにしてやるだけです。タッチエンドでfalse。
方向キーの場合はTOUCH_MOVEでも入力できるようにしておくとグリグリ操作できるようになります(´∀`)
あ、あと押した方向キーが分かるようにボタンが光るようにするには、ボタンが一つ押された画像を用意して押されたボタンごとにrotationで角度を変えてやると全方向の画像を用意しなくても済みます。

と、こんな感じで私は自分のバーチャルキーパッドを作ってみました(*´ω`)興味のある方は一度お試しくださいまし。

あとがき

enchant.jsではスマホで2か所同時にタッチすることはできないので、こういうキーパッドでの入力はうまくいかないと思っていました(enchant.jsでキーパッド使ってるゲーム見たことない・・)。なのでただ単純にポチポチして遊ぶスマホゲームみたいなものしか作らないと思ってました。
ところが「秘密警察ギャボリン第二話」の開発中に遊んでるときに「ダッシュボタン」を押しながら「ジャンプボタン」がしっかり反応することを発見!!!「いけるやん!!( *´艸`)」ってテンション上がって自作でバーチャルキーパッドを作ってしまいましたとさ。めでたし、めでたし。。
ということです(笑)

enchant.jsでのBGMの再生の方法

enchantjs講座

今回はenchant.jsでのBGMの再生についてです。基本的には以前紹介した効果音の鳴らし方と同様に

で再生します。しかし、上記の方法では1回最後まで再生するとそこで音楽再生が終わってしまいます。ゲームのBGMなのだから自動でループ再生してくれないと困りますねよね。

ってことでBGMのループ再生を可能にしてくれる方法がこちら。

詳しいことはわからないのですが、srcというプロパティがスマホにはあってPCには無いようなので処理を変える必要があります。

srcプロパティを持っているスマホでは

この一行を再生時に書いておくだけで自動でループ再生してくれます。問題はPCです。

PCではメインループの中にplay()メソッドを書いておく必要があります。ただし、直接メソッドを書いてしまうとトラブルを引き起こします(演奏停止したいけどplay()メソッドのせいで停止できない、とか)。

なので演奏状態を管理するフラグを用意して再生中のみにループ再生してくれるようにしました。

名前もloopにして何をしてる処理か一目瞭然です(´∀`)

あと、stop()メソッドなんですが、iPhoneでは演奏していない状態でstop()メソッドを実行するとエラーが出て止まってしまいます。それを避けるためにちょっと面倒臭いことになっています(^^;)