開発の準備（セットアップ）

Ponkanでゲーム開発を始めるための準備をします。

Ponkanの入手

Ponkanの最新版はGitHubで公開しています。

以下のリンクから、最新版のzipファイルをダウンロードしてください。

Ponkan最新版

Gitが使える方はgit cloneしたほうが最新版へ更新しやすいのでそちらのほうが良いです。

$ git clone https://github.com/studiomikan/ponkan.git

Node.jsの導入

開発環境として、Node.jsが必要です。

以下の公式サイトからダウンロードし、インストーラにしたがって導入してください。

LTS版（長期サポートの安定板）と最新版がありますが、どちらを導入しても構いません。 こだわりがなければLTS版が良いかと思います。

Node.js 日本語サイト

インストール自体は、基本的にはデフォルト設定のまま進めたので問題ありませんが、 詳細に知りたい方は以下のページを参照してください。

新しいゲームを作成する

新しいゲーム用に、Ponkan関連のファイルをコピーします。

あらかじめ、コピーをするためのスクリプトが用意されていますので、それを利用します。

Windowの場合

tools/new_game.batをダブルクリックして実行してください。 途中、Game folder name:と表示されたら、新しいゲーム用のフォルダ名を入力してください。 （アルファベットを推奨します。できれば日本語は避けたほうが良いです。）

Mac, Linuxの場合

tools/new_game.shをターミナルから実行してください。 途中、Game directory name:と表示されたら、新しいゲーム用のフォルダ名を入力してください。 （アルファベットを推奨します。できれば日本語は避けたほうが良いです。）

ディレクトリを移動する

正常に生成できれば、gamesに指定した名前でゲーム用ファイルがコピーされています。

このままgamesディレクトリで作業してもよいですが、どこかわかりやすい位置にディレクトリごと移動させておいたほうが良いでしょう。

フォルダごとどこか好きな場所に移動して、作業を開始しましょう。

ゲームの起動

setup.batまたはsetup.shを実行すると、ゲームがブラウザで起動します。

Windowsであればstart.batをダブルクリック、Mac/Linuxであればsetup.shをターミナルから実行してください。

環境によってブラウザが開かれないことがあります。 その場合は、ブラウザでhttp://localhost:8080/index.htmlを開いてください。

ディレクトリの構成

作成した新しいゲームディレクトリの中で、は、以下のような構成になっています。

  • folder node_modules/
    • 生成直後には存在せず、初回起動時に生成されます。Node.jsのライブラリなどが格納されます。
  • folder public/
    • ゲーム本体のファイルが格納されています。
  • insert_drive_file package-lock.json
    • Node.js用のファイルです。
  • insert_drive_file package.json
    • Node.js用のファイルです。
  • insert_drive_file start.bat
    • Windows用の起動スクリプトです。
  • insert_drive_file start.sh
    • Mac、Linux用の起動スクリプトです。

publicの下は、以下のような構成になっており、Ponkanのゲームに関係するファイルがすべて含まれます。

  • folder public/
    • folder fonts/
      • ゲームで使うフォントファイルが格納されています。
    • folder gamedata/
      • ゲームのスクリプト、画像、音声などのリソースファイルがここに格納されています。 フォント以外のファイルはすべてここに格納します。
    • insert_drive_file index.html
      • Ponkanのゲームを表示するためのhtmlファイルです。
    • insert_drive_file ponkan.js
      • Ponkanの本体です。
    • insert_drive_file settings.js
      • ゲームの設定ファイルです。

最初の設定

最初にいくつか新しいゲームの設定をしましょう。

settings.jsの編集

public/settings.jsでは、ゲーム全体の設定を行います。 テキストエディタでsettings.jsを開いて編集してください。

以下の設定は、必ず変更するようにしてください。

  // ゲームバージョン
  // ゲームのバージョン番号を設定します。
  // バージョンアップして再公開する場合は、必ずここの値を変更してください。
  gameVersion: "0.0.0",

  // セーブデータ名のプレフィックス
  // セーブデータを保存する際の名前として使用されます。
  // 必ず初期値から変更するようにしてください。
  // もしこの値が同じだと、同じゲームのセーブデータだと判断されてしまいます。
  saveDataPrefix: "ponkan-sample",

index.htmlの編集

public/index.htmlでは、ブラウザ表示に関する設定を行います。 テキストエディタでsettings.jsを開いて編集してください。

ページタイトルを変更する

Webページのタイトルとして表示される文字列を変更します。 初期値は"Ponkan"となっているので、ゲームタイトルなどに変更してください。

  <title>Ponkan</title>

init_system.ponの編集

public/gamedata/script/init_system.ponでは、メッセージのフォントやグリフなどの設定を行います。 テキストエディタでinit_system.ponを開いて編集してください。

init_system.ponは、今すぐ設定しておくところはありません。 ゲームを作っていく中で、フォントを変更したり、レイヤー数を変更したくなった時などに参照してください。