背筋を伸ばして深呼吸

折角なので専門知識を活かしたい

スマホゲームアプリの作り方 (ライブラリの話①)

ゲーム的な機能とは何か?

脱出ゲーム制作委員会を一人で立ち上げてから、まずやることがあります。

部屋のデザインも大事になってくるんですが、とりあえずまだ大事なことがあるので、デザインはその後に考えるとして、まず重要なことは「ゲーム的な機能」です。

 

ゲーム的な機能を細かく分けると次のようになります。

  • 部屋内での方向、視点の移動
  • タッチ領域の定義
  • 謎解き、仕掛けの動き

 

 

 

部屋内での方向、視点の移動

最初は部屋の移動からです。ページ遷移にあたる部分の実装ですね。

脱出ゲームの場合は、閉じ込められている部屋の移動と、詳しく調べたい所をズームで見るなどの視覚的な機能が必要です。これはいちから実装するのは大変そうなので、ライブラリを探すことにします。

 

ちなみにライブラリとは、

他の誰かが作ってくれた便利な機能をまとめたソースコードないしプログラムのことです。

自分で書く必要がないのでとても便利な反面、有料だったりライセンスがあったり注意が必要ですね。

 

ライブラリを探すに当たって、まずは必要な機能を整理します。

通常ですと、HTML の リンク(aタグ)で使用してページ遷移を考えた場合、部屋の移動は瞬間移動になります。今回は、ゲーム的な動きとして瞬間移動はしたくないので、これらの部屋の移動はアニメーションで表現したいと思います。

 

そこで、探したところ、「PAGE TRANSITIONS」 というライブラリがありました。

tympanus.net

 

Animation.cssを利用しており、アニメーションでページ遷移ができます。

通常のスライドによる左右の移動の他、カテゴリには「ROOM」の遷移があり立体回転を装飾できます。また、詳細なページへ遷移する場合は、「SCALE」の拡大縮小移動が使えそうですね。

 

ただ、残念な点として、JQueryが使用されています。

JQueryは決して悪いものではありませんが、今回はriot.jsを使用するにあたって、JQueryを使用しない方向で行こうかと考えています。

 

なので、この部分は最悪自作するかもしれません。

 

タッチ領域の定義

次に、タッチ領域についてです

当然ですが、ゲーム内では押せるところと押せないところが存在します。押せる箇所は、領域の大きさ、押せる形を定義する必要があります。

特にスマートフォンでは指で押すことが前提になりますから、タッチ領域を小さくとると、ゲーム性として相当シビアになってきます。なのでタッチ領域については、指で押せることが最小の領域になります。

 

今回の開発では、タッチ領域にHTMLのTABLEタグを使用します。

タッチ領域をブロック単位(最小領域)で考えられることと、セルの結合が可能なことがその理由です。タッチ領域を大きく取りたい場合は、セルで結合された大きめの領域を取ればいいわけです。テーブルレイアウトについては、ライブラリを使用せず、PHPで地道に実装します。

今後のコンポーネントの作成にて、設計を詰めていきたいところですね。 

 

謎解き、仕掛けの動き

次は、脱出ゲームによくある仕掛けが必要です。

実用化するには「暗号を解読して、箱を開ける」などの動きになりますが、今の段階ではもう少し簡略化して「スイッチを入れると、電気がつく」という機能で考えます。

 

htmlにおけるライブラリの一つに「riot.js」というものがあります。

これによりHTMLでオブジェクト指向的な設計が可能になります。

riotjs.com

 

詳しい使い方は、riot.jsのホームページを見ていただきたいのですが、HTMLのコーディングの概念を覆すものに違いありません。riot の意味は「暴動」ですから、それほどのインパクトがあったりします。これからHTMLを勉強したい人にはおすすめです。決して王道ではなく、裏道ではありますが、近道を知っておくにこしたことはありませんから。

 

再利用なコンポーネント

riot.jsの主な機能として再利用可能なコンポーネントを作成できます。

例えば、ボタンコンポーネントというタグをひとつ作成しておけば、同じボタンを別の場所で使いたい場合には、HTMLに一行タグ名を追加するだけでボタン機能のコピーが可能です。ボタンのHTMLとCSSデザインとJavaScript処理が一つのコンポーネントととして作成できますからね。詳しいことは以前の記事を参照くださいませ。

 

ant0720.hateblo.jp

 

riot.js のイベント機能

riot.jsのコンポーネントという考え方の他に、Observableという機能があります。2つのコンポーネント間を、イベントを介して処理するためものです。

 

これは言葉としては難しいかもしれませんが、「スイッチを入れると、電気がつく」という機能を考えたとき、処理内容を把握しやすいかと思います。

 

実際に実装すると必要なコンポーネントは2つになります。

 

・共通処理系に次の変数を用意しておきます。

<script>
var obs = riot.observable();
</script>

 

スイッチコンポーネント

 - ON, OFFの画像の変更

 - ON, OFFが変更されたときの値を通知する

<light-button>

<button onclick='{ switchChange }' >
    <img ref='light_switch' src='switch_off.png' />
</button>

<script>
var self = this
var isOn = false

switchChange() {
    isOn = !isOn
    if (isOn)
    {
        self.refs.light_switch.src='switch_on.png'
    }
    else
    {
        self.refs.light_switch.src='switch_off.png'
    }
    obs.trigger('light_switch:change', isOn)
}
</script>
</light-button>
電球コンポーネント

 - スイッチの変更を受けて、ON, OFFの画像の変更

 

<light>
    <img ref='light' src='light_off.png' />

<script>
var self = this
obs.on('light_switch:change', function(isOn) {
    if (isOn)
    {
        self.refs.light.src = 'light_on.png'
    } else {
        self.refs.light.src = 'light_off.png'
    }
})

</script>

</light>

 

ソースは読めますでしょうか? obsオブジェクトを通して、コンポーネント間でイベントのやりとりをしていることがわかると思います。

 

動作確認的に、作ったものなので今後のシステムでは、コンポーネントはもっと手を加えたものになりますね。

 

最後に

ライブラリの選定ですが、

自分のスキルと相談して、これは難しそうだなとか、実装方法が分からないなということがあれば、ライブラリに頼ることになります。

 

実装が進められそうであれば、デザインの方を考えていきたいと思います。

ではでは。