KYO

enchantjsでノベルゲームエンジンの作り方チュートリアル

2018年6月11日 enchantjs , ,

enchantjsを使えばブラウザで動作するアプリケーションを作成できます。
また開発環境の構築も大したことはありません。必要なファイルをダウンロードすればすぐに、開発を始めることができます。

というわけで、今回はノベルゲーム(ギャルゲー)を作っていきます。

enchantjs特有の処理などについては極力省略し、あくまでノベルゲームを作ることが目的です。

 

今回のソースコードはgithubに置いてあります

 

 

ノベルゲームを作る時に同じ様なノベルゲームを量産できると便利なので、今回はノベルゲームを作るエンジンっぽいものを作っていきます。

エンジンっぽいものの名前は、キャラクター名からとってMiyaにします。

 

完成品

 

機能としては

  • キャラクターは1シーンに2人まで登場可能。
  • 選択肢によってゲームの展開を変えることが可能。
  • 背景画像の設定が可能

と、割と必須機能は付いていると思います。

 

 

ノベルゲームの処理の流れ

 

ただ、ノベルゲームはいろんな作品も同じ様に作りたいので、流用できるようにシステムを作っていきます。

 

まずはゲーム表示画面のindex.htmlです

enchantjs本体とプラグインと、シーンデータ、プレイヤーデータ、ゲームデータを読み込んでいます。

 

主にgame.jsがコアエンジンのようなものです。
SceneDataが物語のシナリオファイルになります。どういった流れであるかを掴むために
ちょっとSceneDataのほうをお見せします

 

SceneData.js 一部

 

このシナリオファイルに必要事項を書いていけば、物語を作れるという仕組みです。

シナリオファイルでは、キャラクターや背景画像の設定。
セリフの設定と、次のシーン先の設定を、連想配列の形式で設定しています。

 

なぜこのようなことが実現できるのかというと、まだ登場していないのですがevalメソッドが鍵になっています。
この関数と引数のセットになっているのです。

SetNextSceneNameという関数の引数がscene2という流れです。

 

メインエンジンを作る

メインエンジンはgame.jsです。少しややこしいですが、作っていきます。

 

まずはenchantjs特有の部分を書いていきます。

 

CurrentSceneクラスこそがメイン処理の正体であります。

 

enchant();

でenchantjsが使えるようになります。

そして必ずCoreクラスをインスタンス化して、fpsを設定しておきます。
お決まりの呪文のようなものですね。

 

画像や音楽などのアセットを使用するときは、プリロードしておきます。
配列に用意しておくと一気に読み込みができるので便利です。

 

では本体を作っていきます。
まずは順番にSetChoiceScene関数を作ります

game.jsに追記していきますが、場所はenchant();の下から書いていきます

 

 

最初に呼ばれる関数です。

SetChoiceSceneはこんな引数でした。

_currentScene.SetChoiceScene([“▶︎ ゲームスタート”,scene1,”▶︎ このゲームについて”,aboutscene]);

これは見ての通り、args[1]と[3]がシーン名になっています。このシーン名の正体は連想配列であることがポイントです。

 

そしてexecuteNextというメソッドを呼び出しているのでこれを作ります

 

 

ここで

_currentScene[val](args[val]);

というものがあります。これでシーン名の連想配列にある関数を実行していきます。

 

単純な関数から作っていきます

見ての通りの関数です。

つぎはちょっとややこしくなってしまった関数です

 

 

このメソッドでは表示するテキストを設定するのと、次へボタンと戻るボタンを設置しています。

次へボタンは、引数を順番に走査していき空になった時点でexecuteNextを呼び出して次のシーンへ遷移していきます。

ここでeval関数が使われています。

getNextSceneNameで返却されるものを、javascriptのコードとして返却することできます。

 

その他フラグ系の関数

今までのままでは本当に小説を読むだけのゲームになりますが
フラグ管理を取り入れることでゲーム性を持つようになります。

 

関数名がおかしいものがありますが・・・・

そこには触れないでください。。。

 

ここではplayerの持つstatusにアクセスして条件によって処理を変えていきます。

 

というわけでまずはMainPlayerクラスを作ります

MainPlayer.js

ステータス情報を持っています。

ここにアクセスすることでシナリオに変化を持たせることができます。

 

ちなみにシナリオからは、こんな感じで呼び出されます

 

AddPlayerStatusPlaneでは[‘nenepoint’,1]という引数を受け取ることで
プレイヤーのステータス情報のnenepointに1を追加できます

 

SelectMethodは条件式と、遷移先が配列に入っています。
この条件式は

var prop = args[0].split(‘ ‘);
var siki = player.status[prop[0]] + prop[1];

で分解し条件式にしています。

もちろんこれらは全て文字列になっているので、eval関数でjavascriptのコードとして評価しているということです。

 

 

長くなりましたが、これでノベルゲーム(ギャルゲー)を作る簡単なエンジンもどきが完成しました。

あとはweb上に公開すれば誰でも遊ぶことができますし、これをスマホアプリにすることもできます。

 

素敵なアプリ制作ライフを!


関連記事

enchantjsでクソギャルゲーを作った

2018年6月10日

作品   enchant.jsは、HTML5とJavascriptを用いたフレームワークである。   Xamarinでアプリを作った時に、ブラウザで動けば楽なのにと思った時に、enchantjsという選択肢を選びました。   クソノベルゲームを作りました。   enchantjsのすごいところは、ま...