みどりのあくま

勉強したことをアウトプットしていきます。

一部の記事をQiitaに移動させます。

そんなに書いてないですが、私はQiitaとはてなブログの2つに使っています。
Qiitaはtips系で、はてなブログはもう少しまとまった技術記事や日常的な記事を書いていくと使い分けていました。
ただ、今回はてなブログの技術寄りの記事を全てQiitaの方に持って行こうと思っています。

色々理由があるのですが、これはQiitaかな?とかこれははてなかな?みたいなことを考えるのが面倒になったからです。
なので、技術はQiita、それ以外ははてなブログと明確に分けれた方がいいかなというのが一番大きいです。

いくつかの技術系のものはQiitaに移動させて、はてなブログの記事を削除します。

はてなはUnityのシェーターとかパーティクル、3DモデリングなどQiitaに向かなそうなものはこちらに書いて行こうと思っています。
なので閉鎖することはなく引き続き使っていく予定なので、今後ともよろしくお願いします。

parcel + phina.js + carlo でゲームを作る

以下記事を見つけました。

qiita.com

qiita.com

これは以前解説したparcel + phina.jsのコードを使い回せばいけそうな気がしました。

carlo

上の2つに記事を読んでもらえばわかると思いますが、簡単に言うとChromiumとnode.jsを使って動くハイブリットフレームワークです。
electornなどと違って、ローカルにインストールされているchormeのエンジンを使います。 なので配布する際の容量は小さくできます。

完成物

完成したものは以下に置いておきます。

github.com

今回はとりあえず起動することを考えるので、electronの時同様にビルドした物をアプリから起動させます。

実装

まず、以下のコードを丸々流用します。

github.com

次に carlo を導入します。
npmを使ってインストールします。

$ npm i carlo --save-dev

完了したら、プロジェクト直下に以下 app.js ファイルを作成します。

const carlo = require('carlo')

const bootstrap = async () => {
  const app = await carlo.launch({
    width: 385,
    height: 600
  })
  app.on('exit', () => process.exit())
  app.serveFolder('build')
  await app.load('index.html')
}

bootstrap()

あとはアプリを実行して起動させれば終わりです。

$ node app.js

以下のような画面が出れば成功です。

f:id:orange634:20181124220931p:plain

以上です。
メッチャ簡単ですね。

正直ゲームで使えるかというと…多分使えないでしょうね。
nodeやchromeがインストールされていることが前提なので、ゲームを配布用するのには向いてないと思います。
ゲームの配布方法として使うというよりnodeと連帯がとりやすようなので、ちょっとした開発用のGUIツールに使う感じ?かもしれません。
RPGツクールみたいにデータを作成する画面とかに使えるかもしれません。

parcel + phinaで簡単ゲーム開発環境構築 その5

学習方法

ここまで複数の記事を使って parcel + phina.js を使ったゲーム開発環境構築から公開までの解説しました。
あまり parcel や phina.js 自体についてはあまり解説を行ってないので、簡単にですがそれぞれの学習方法について紹介します。

parcel の学習方法

parcel は日々内容がアップデートされていってどんどん便利になっています。
基本的に公式ドキュメントに全てが書かれているので、そちらの内容を確認するのが一番です。
量もそこまで多くないので、時間がある時に一読しておくことをおすすめします。

🚀 Getting Started

phina.js の学習方法

phina に関してはネットに情報がたくさんあるので(しかも日本語!)、「やりたいこと」+「phina」で調べたら大体の情報が出てきます。
私がよく参考にさせていただいているのは、@alkn203さんの「phina.js Tips集」というQiitaの記事です。

qiita.com

基本的にこちらの記事に大抵のことは書いてあります。
ブックマークしておきましょう。

あとがき

以上で今回の記事の内容は終わりです。

本当は書籍にする際はあとiOSAndroidアプリに変換する方法も追加しようと考えていました。
が、ちょっと間に合わなかったです……
cordova を使って実現しようと思ったのですが、自分の知識が足りておらずまだ上手く出来ていません。
それ以外にも、electron の部分も個人的にはいまいちだと思っています。
開発の際もできれば electron を起動させて、その上で開発したいと考えていました。
なので、同人で出すことを見送りました。(それ以外の理由もあるのですが……)

ブログでしたら気楽にかけるのでとりあえずこれで出してしまえと公開するに至りました。
スマホアプリ対応が成功したら記事の続きを書こうと思います。
最後まで読んでいただきありがとうございました!

parcel + phinaで簡単ゲーム開発環境構築 その4

デスクトップアプリとしてビルドする

前の記事では netlify を用いてウェブに公開する方法を紹介しました。

前の記事 orange634.hatenablog.com

ただ、せっかく作ったアプリなので、ウェブ以外で遊べるようにしたいという気持ちもあるでしょう。
この章では先ほど作ったアプリをデスクトップアプリとしてビルドする方法を紹介します。
但しそこまでサクッとはウェブ公開ほど簡単ではないです。
また、ゲームによってはこのままの設定だとビルドが難しかったりします。
あくまで、一応できるということを示すものだと考えてください。

デスクトップアプリにするのに electron を用います。
まず electron について簡単に説明します。

electronとは?

electronjs.org

GitHub が公開したデスクトップアプリ開発用のフレームワークです。
html/css/js などのウェブの技術でMacWindowsLinux に対応したデスクトップアプリを開発が出来ます。
Node.js と Chromium をランタイムとしており、Atom、VisualStudioCode、Slack など様々がアプリが electron で制作されています。
parcel + phina.js 作ったゲームは html/css/js で作られているので、Electron を使うことで簡単にアプリケーション化することが出来ます。
ちなみに parcel1.8 から electron 向けにビルド出来るようになりましたが、うまくいかなかったので今回はその機能は使用しません。

ビルドするアプリ

今回はおすすめ最小構成を electron でビルド出来るように作り作り変えます。

github.com

mac のみをターゲットにしてビルドを行います。
ただ単にブラウザで動いているものをデスクトップアプリとしてビルドするだけなので、開発する際はブラウザで行います。
作り変えたものはこちらのリポジトリに上げてあります。

github.com

設定方法

必要なモジュールのインストール

まず、必要になるモジュールをインストールします。

npm i electron electron-builder --save-dev

electronelectron-builde は electron アプリの起動やビルドに使います。

electron.js の作成

まず、 electron.js というファイルを作成します。
これは electron アプリを起動するときに使用します。

const electron = require('electron')
const {app, BrowserWindow} = electron
const path = require('path')
const url = require('url')

let mainWindow

const createWindow = () => {
    let mainWindow = new BrowserWindow({
        contentSecurityPolicy: "default-src 'none'",
        width: 400,
        height: 600
    })
    const startUrl = url.format({
        pathname: path.join(__dirname, './elebuild/index.html'),
        protocol: 'file:',
        slashes: true
    })
    mainWindow.loadURL(startUrl)
    mainWindow.on('closed', () => {
        mainWindow = null
    })
}

app.on('ready', () => createWindow())

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow()
    }
})

シンプルな electron の設定なので説明は省略します。
重要なのは以下の2点です。

  • ローカルのファイルを読み込めるように contentSecurityPolicy: "default-src 'none'" を設定する。
  • 読み込むファイルを pathname: path.join(__dirname, './build/index.html') と設定する。

package.json の編集

scripts を編集

次にビルド用のスクリプトpackage.json に追加します。

"clean": "rm -rf ./dist && rm -rf ./.cache && rm -rf ./build && rm -rf ./elebuild",
"elebuild": "npm run clear && parcel build ./src/index.html -d elebuild --public-url ./",
"pack": "npm run elebuild && electron-builder"

clean に新たに rm -rf ./elebuild を追加しました。
elebuildbuild と異なり --public-url ./ を追加しています。
--public-url ./ を追加することで、html が下記のように変わります。

<script src="/src.xxxxxx.js"></script>
↓
<script src="src.xxxxxx.js"></script>

前に / がついているとelectronでうまく読み込めないのでこのようにする必要があります。
packnpm run elebuildelectron-builder を実行します。
electron-builderpackage.json の設定に従いアプリをビルドします。

ビルドの設定

次に package.json にビルドの設定を行います。
name にアプリ名を設定します。

"name": "parcel-phina-electron-example"

次に mainelectron.js を指定します。

"main": "electron.js"

build に electron のビルドの設定を行います。
今回はmacに向けてビルドを行うので以下のように設定しました。
今回はとりあえずビルドすること出来るようにすることを目標にしているので、最小の設定にしています。

"build": {
  "appId": "parcel.phina.electron",
  "files": [
    "electron.js",
    "elebuild/*"
  ],
  "directories": {
    "output": "app"
  }
}

appId は今回は parcel.phina.electron としています。
files にビルド対象となるファイルを指定します。
directoriesoutput プロパティにアプリの出力先を指定します。
他と混ざらないように app を指定しています。
electron-builder は他にも設定が出来るので自分のアプリに合わせて設定を行ってください。

Common Configuration - electron-builder

その他

その他に出力されたアプリを git に含めないために .gitignoreapp/ を追加します。

ビルド方法

ビルドは npm run pack を実行します。
しばらくすると app/mac にアプリが出力されます。
出力されたアプリはそのまま実行可能です。
実行して以下の画面が表示されれば成功です。

f:id:orange634:20181113010328p:plain

まとめ

簡単にですが、electron のアプリにビルドする方法を紹介しました。
この説明はあくまでビルドする方法だけで、アプリのアップデートなどは考慮していません。
また、あくまでウェブで作ったアプリをとりあえず electron でビルドする方法を紹介しているだけです。
本格的に electron アプリを開発する際は別の方法や設定を行うことをおすすめします。

次の記事で一連の「parcel + phina で簡単ゲーム開発環境構築」の記事の総括を行います。


次の記事 orange634.hatenablog.com

parcel + phinaで簡単ゲーム開発環境構築 その3

Webに公開

前の記事でゲームの開発環境を整えました。

前の記事 orange634.hatenablog.com

ただ、ゲームは公開して誰かに遊んでもらいたいですよね。
ここまで、楽々に環境構築を行って来たので公開に関しても楽々行いたいと考えています。
色々な方法があると思いますが、この記事では netlify というサービスを使った方法を紹介します。

netlifyとは?

www.netlify.com

簡単にいうとホスティングサービスです。ただ、netlify はホスティング以外にも機能があります。
指定したブランチに push を自動で検知してデプロイしてくれたり、https 対応、カスタムドメインの設定、webhook などなど様々な機能があります。
細かい機能についてはnetlifyのドキュメントページをご覧ください。

www.netlify.com

今回 netlify を選んだのは、自動デプロイ機能の設定が簡単なのに使いやすいからです。
ここまで設定ファイルなしでやってきたので、デプロイに関しても出来るだけ設定なしでいきたいと思いこちらを採用しました。

デプロイするアプリ

前の記事で作成した、おすすめ構成をデプロイしたいと思います。

github.com

実際にこちらにデプロイしました。

Parcel + Phina.js sample

手順をなぞりながら実装方法を試す場合は、githubリポジトリをフォークして、フォークしたリポジトリでデプロイしてみてください。

設定方法

まずホームページにアクセスして、 [ Sign Up ] をクリックします。

f:id:orange634:20181113004000p:plain

GitHub、GitLab、Bitbucket、Email があります。
お好きなアカウントでサインアップしましょう。

f:id:orange634:20181113004004p:plain

サインアップが完了してログインしたら以下のような画面が表示されます。
アプリの設定を行いましょう。
[ New site from Git ] をクリックしてください。

f:id:orange634:20181113004203p:plain

使う Git のプロバイダーを選びます。
今回は GitHub に上がっている私のコードを使うので、GitHub をクリックします。 この時連帯がされてない場合は GitHub の連帯確認画面が表示されます。
確認して連帯してください。

f:id:orange634:20181113004210p:plain

次にリポジトリを選択します。
今回の場合は [ parcel-phina-simple-example ] を選びます。
ちなみにプレイベートリポジトリも選択可能です。

f:id:orange634:20181113004216p:plain

最後にデプロイの設定を行います。
設定といっても、デプロイ対象ブランチ、ビルドコマンド、ビルドファイル出力ディレクトリをしていするだけです。
今回は以下のように設定します。
設定が完了したら、 [ Deploy site ] をクリックします。

f:id:orange634:20181113004628p:plain

すると、サイトのデプロイが開始します。

f:id:orange634:20181113004642p:plain

今はまだデプロイ中で見ることができません。
デプロイ状況は [ Production deploys ] から確認できます。

f:id:orange634:20181113004700p:plain

クリックするとデプロイ状況を示すコンソール画面が表示されます。
しばらく待つとビルドが完了します。

f:id:orange634:20181113004807p:plain

先ほどのページに戻ると、緑色になっておりデプロイが完了しています。
urlをクリックしてページを開きましょう。

f:id:orange634:20181113004836p:plain

以下のような画面が表示されていたら完了です。

f:id:orange634:20181113005038p:plain

サブドメンの変更

ちなみにサブドメインはランダムに割り振られますが、編集可能です。
サブドメインはサイト名を変えることで変更可能です。
まず、 [ Site settings ] をクリックします。

f:id:orange634:20181113005056p:plain

[ Site details ] の [ Site information ] の [ Change site name ] をクリックします。

f:id:orange634:20181113005110p:plain

お好きな [ Site name ] を入力して、 [ Save ] をクリックします。

*注意* 今回例で使った parcel-phina-simple-example はこのアプリで使っているので多分使えません 別の名前を指定してください。

f:id:orange634:20181113005245p:plain

するとサブドメインが変更されます。

f:id:orange634:20181113005257p:plain

自動デプロイの確認

次に自動デプロイが出来ているか確認しましょう。 適当にreadmeあたりを編集して master ブランチにプッシュしましょう。 先ほど設定したアプリのページを見ると BUILDING と表示されてビルドが走っているのが確認できます。 これで自動デプロイが動いていることを確認出来ました。

f:id:orange634:20181113005327p:plain

まとめ

このように netlify を使うことで簡単に開発から公開までの流れを作ることが出来ました。
あとは開発に集中してゲームを開発するだけです。
静的なサイトなのでサーバーレスなどに比べて監視が不要なので、そういった所のコストも削減できます。
これで一応一通りの開発環境とデプロイ設定まで完了しました。
次の記事では趣向を変えて、今回作成したアプリをデスクトップアプリにビルドする方法を紹介します。


次の記事 orange634.hatenablog.com

parcel + phinaで簡単ゲーム開発環境構築 その2

前回、導入部分のみ書きました。

前の記事 orange634.hatenablog.com

本記事では早速開発環境を構築していきたいと思います。

最小構成

目標

はじめに最小構成を作成します。
以下の画面が表示されるのを目標にします。

f:id:orange634:20181106141317p:plain

サンプルコードは以下にあるので詳しい内容は以下のリポジトリから直接確認してください。

github.com

構築方法

アプリケーションの作成

まず、プロジェクトフォルダを作成してnpmの初期化を行います。

$ mkdir sample-project
$ cd sample-project
$ npm init
##### 以下は入力例です #####
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (code) sample-project
version: (1.0.0) 
description: sample project for parcel and phina.js
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC) MIT
About to write to /xxxxxx/xxxxxx/sample-project/package.json:

{
  "name": "sample-project",
  "version": "1.0.0",
  "description": "sample project for parcel and phina.js",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "MIT"
}


Is this OK? (yes) yes

次に parcel と phina.js をインストールします。

$ npm i parcel --save-dev
$ npm i phina.js --save

作業用ディレクトリを作成して、index.html を作成します。

$ mkdir src
$ touch src/index.html

作成した index.html に以下のコードを書きます。

<!DOCTYPE html>
<html lang=ja>
<head>
    <meta charset="utf-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=viewport content="width=device-width,initial-scale=1">
    <title>Parcel + Phina.js sample</title>
</head>
<body>
    <script src="index.js"></script>
</body>
</html>

次に index.js を作業ディレクトリに作成します。
この index.js にメインのコードを書いていきます。

// phina.jsを有効化 <--- (1)
import 'phina.js'
phina.globalize()

// メインシーン定義 <--- (2)
phina.define('MainScene', {
    superClass: 'DisplayScene',
    init() {
        this.superInit()
        // 背景色指定
        this.backgroundColor = 'gray'
        // スプライト作成・表示
        this.label = Label({
            text: 'Hello Parcel + Phina.js',
            fill: 'white',
            x: this.gridX.center(),
            y: this.gridY.center()
        }).addChildTo(this)
    }
})

// アプリ実行 <--- (3)
phina.main(() => {
    const app = GameApp({
        startLabel: 'main'
    })
    app.run()
})

これで「Hello Parcel + Phina.js」という文字が画面に表示されます。

上のコードを部分ごとに解説していきます。

まず、(1) の箇所で phina.js を読み込んで有効化しています。
これは必ず始めに書かないと GameApp などでエラーになるので注意してください。

(2) の部分で MainScene を定義しています。
phina.js では普通の js と異なるクラス定義方法を取っています。
ここでは画面に「Hello Parcel + Phina.js」という文字を表示させる処理を書いています。
本記事では phina.js 自体の細かい説明は省かせて頂きます。

(3) の部分でアプリを実行させています。
今回は MainScene から起動させたいので、startlabel: 'main' を定義しています。

実行

では、実際に確認してみましょう。
npx parcel src/index.html でビルドしてください。
今回は parcel をローカルインストールしたので、実行させるには npx をつける必要があります。

$ npx parcel src/index.html 
Server running at http://localhost:1234 
✨  Built in 3.16s.

ビルドが完了したら、http://localhost:1234 にブラウザでアクセスしてください。

f:id:orange634:20181106141317p:plain

上記のように表示されたら完了です。
ビルドされたファイルはdist ディレクトリ以下の出力されます。
jsmap ファイルにつく数字はランダムなので別の数字になっていても問題ありません。

$ ls -l dist/
total 1864
-rw-r--r--  1 musashi  staff     342  8 22 16:49 index.html
-rw-r--r--  1 musashi  staff  398898  8 22 16:49 src.86dd6973.js
-rw-r--r--  1 musashi  staff  483932  8 22 16:49 src.86dd6973.map

ランダム数字で問題ないか確認してみましょう。 src/index.html では index.js を読み込む箇所を <script src="index.js"></script> と記載しています。
一方 dist/index.html では <script src="/src.86dd6973.js"></script> に書き換わっています。
なので、ビルド後も index.js は正しくインポートされます。

これで開発環境は整いました。
すごい簡単ですよね?私もそう思います。
正直これで開発環境の構築は終わってしまうのですが……私が開発する時に構成について紹介します。

おすすめ構成

この構成は私がおすすめというか、自分んがよく使っている構成について説明していきます。
必ずしもこの構成にする必要はありません。あくまで私の一例です。

目標

以下の画面が表示されるのを目標にします。

f:id:orange634:20181108003324p:plain

サンプルコードは以下にあるので詳しくはそちらを確認してください。

github.com

構成の解説

ディレクトリ構成

src ディレクトリ以下は以下のようになります。

.
├── GameClass
│   ├── MainScene.js
│   ├── PixcelSrite.js
│   └── index.js
├── assets
│   └── parcelPhina.png
├── config.js
├── index.html
└── index.js

各ファイルとその役割は以下のようになります。

ディレクトリ名・ファイル名 用途
GameClass ゲームクラスを定義するフォルダです。
簡単なゲームでもそれなりの量のクラスを作るのでクラスごとにフォルダを分けています。
必要があればさらに階層を設けていいと思います。
assets アセットデータを配置するディレクトリです。
必要があればさらに階層を設けていいと思います。
config.js ゲーム内の設定やアセットデータを定義します。
設定はマジックナンバーを避けたり、ハードコーディングを避けるに使用します。
index.html エントリーポイントとなるファイルです。
最小構成と全く同じ内容です。
index.js 最小構成と異なっています。
詳細に関しては後ほど説明します。

クラス定義

ゲームで使用するクラスは GameClass ディレクトリ以下に定義します。
例えば MainScene.js は以下のように定義してます。

// メインシーン定義
export default {
    superClass: 'DisplayScene',
    init() {
        this.superInit()
        // 背景色指定
        this.backgroundColor = 'gray'
        // スプライト作成・表示
        this.parcelPhina = PixcelSprite('parcelPhina')
            .setPosition(this.gridX.center(), this.gridY.center() - 50)
            .setScale(7)
            .addChildTo(this)
        // ラベル作成・表示
        this.label = Label({
            text: 'Hello Parcel + Phina.js',
            fill: 'white',
            x: this.gridX.center(),
            y: this.gridY.center() + 200
        }).addChildTo(this)
    }
}

phina.define() の第二引数に当たる object のみ記述しています。
各クラスファイルで phina.define() を使って定義する方法もあるとは思いますが、少なくとも私が試した限り上手く出来ませんでした。

phina にクラスと登録するのは別の場所で行なっています。
GameClass 内で定義したクラスを GameClass/index.js で一つのオブジェクトにまとめます。

import MainScene from './MainScene'
import PixcelSprite from './PixcelSrite'
export default {
    MainScene,
    PixcelSprite
}

index.jsGameClass オブジェクトを元に phina 向けのクラス定義をします。

import GameClass from './GameClass'

// *** 省略 ***

// クラスを定義
for (const className in GameClass) {
    phina.define(className, GameClass[className])
}

このような構成にすることで、クラスをファイルごとに分割しながらも効率的に phina にクラスを登録出来ます。

アセットの定義

parcel でビルドする際に、各アセットにランダムな文字列が追加されます。

ランダム文字列付きのアセット名は import xxx from '<assetsのパス>' のよすると変数xxx にランダム文字列付きのアセット名が格納されています。

今回の構成では config.js にアセット関連の定義を行なっています。 config.js は以下のようなコードになります。

import parcelPhina from './assets/parcelPhina.png'
export default {
    // アセットを定義
    assets: {
        image: {
            parcelPhina: parcelPhina
        }
    }
}

定義した物を index.jsGameApp に設定をしています。

import config from './config'

// *** 省略 ***

// アプリを実行
phina.main(() => {
    const app = GameApp({
        startLabel: 'main',
        assets: config.assets // <-- ここでアセットを読み込ませている
    })
    app.run()
})

package.json

よく使うコマンドは scripts に定義しておきます。

"scripts": {
  "clear": "rm -rf ./dist && rm -rf ./.cache && rm -rf build",
  "dev": "parcel src/index.html",
  "build": "npm run clear && parcel build src/index.html"
}

parcel はキャッシュに関連して正しくビルドが出来ない場合があります。
なので、npm run cleardist.cachebuild ディレクトリを消せるようにしておきます。
上手くビルド出来ない時などに実行します。

ビルドする際は必ずキャッシュをクリアしてます。
ビルドする際、出力先のパスを指定しないと dist へ出力されるので -d build のオプションをつけて出力先ディレクトリを開発用と分けておきましょう。

その他

今回のサンプルで PixelSrite というクラスを作成しています。
これはドット絵をスプライトで表示させる時、拡大してもアンチエリアスを無効にするクラスです。

実行

開発する際は npm run dev を実行します。
問題がなければビルドが完了するので、ブラウザで http://localhost:1234 を開いてください。
ファイルを編集したら、自動でビルド・ブラウザをリロードされます。

ビルドする際は npm run build を実行します。
ビルドが走り、生成物は build ディレクトリへ出力されます。
これは次の章で web に公開する際に使います。

まとめ

最小構成とおすすめの構成の2種類を紹介しました。
おすすめの構成はあまり作り込みすぎず、使いやすさを考えてみました。
これで開発環境は整いました。
次の記事では web への公開方法について説明していきます。


次の記事 orange634.hatenablog.com

parcel + phinaで簡単ゲーム開発環境構築 その1

技術書典5に出そうと思っていた新刊を落としました…… 最悪電子書籍で出せなくもないけれど、ちょっと本にまで持っていくのに時間的・体力的・クオリティ的に難しいと判断したのでブログの記事として書いていこうと思います。
出来なかった経緯とかは以下のスライドを見て察して貰えれば幸いです。

speakerdeck.com

正直ちゃんと考えて作業した方がよかったなと後悔しています。
次回はどうするか決めていませんが、書く機会があれば書いてみたいと思います。
次こそは絶対に落とさないように…!

ちなみに、複数人でサークル参加して出したので世間一般的には落としてないことになっています。 当日は「プログラム言語神経衰弱」を配布しました。
詳しくは以下の記事を読んでください。

note.mu

目次

その1

この記事

その2

orange634.hatenablog.com

その3

orange634.hatenablog.com

その4

orange634.hatenablog.com

その5

orange634.hatenablog.com

はじめに

私は個人的に「簡単・シンプル」というライブラリやフレームワークを好んで使っています。
というのも、物を作る際に一番大切だと思っているのは「何が作りたいか」だと思っているからです。
作るものに集中して、出来るだけツールやライブラリ・フレームワーク等にかける学習コストは最小に抑えたいと考えています。

今回としばらくの記事で parcel と phina.js でゲーム開発できる環境を作る方法を紹介します。

ツール&モジュール

parcel

ウェブフロント用のビルドツールです。
ここ最近のフロントエンド開発では Browserify や Webpack などのビルドツールの使用は必要不可欠です。
ただ、Webpack の設定は割と大変で他人が読むことも非常に困難になってきています。
parcel はこれまでのビルドツールと異なり、「設定ファイルを必要としない」という特徴を持っています。
つまり、設定ファイルなしで各種ファイルのトランスパイルやビルド、HMR、CodeSpliting などが出来ます。
使い方も簡単で

$ parcel index.html

とエントリーファイルを指定するだけで、依存関係のあるファイルを自動で探索して、ビルドしてくれます。
本番用にビルドする場合も

$ parcel build index.html

で実行出来ます。出力されたファイルは全てミニファイされています。
また、ビルド速度もキャッシュがあるので実際に使う分には問題ない速度さでビルドされます。
最近のアップデートで依存関係があるモジュールが未インストールだった場合、自動でインストールしてビルドしてくれるようになりました。
もはやちょっと怖い領域ですね(笑)

このようにビルドや開発環境構築などを全て自動で行なってくれます。
開発者はよりアプリケーションの開発に注力出来ます。

phina.js

javascript で作られた国産ゲームライブラリです。
プログラミング初心者でも使いやすく、上級者の要望に応えられるカスタマイズ性も持っています。
タイトル画面やゲームオーバー画面はデフォルトのテンプレートが既に用意されています。
この機能はプログラミング初心者はインゲームを作るのに集中できるし、上級者はサクッと作りたい場合にも使いやすいです。
簡単なタイトルとかでもいざ実装しようとすると手間ではあるのでこういった機能はありがたいです。
また、pixi.js や three.js など外部ライブラリとの連帯も行えます。
なので、よりパフォーマンスを求められる場合に一部 pixi.js を使うことも可能です。
これ以外にも、衝突判定、トゥーンアニメーション、入力系のサポートなどなど様々な便利機能が標準で用意されており、スムーズにゲーム開発を行えます。

parcel と phina.js を組み合わせる意味

parcel と phina.js を使った開発で一番の特徴は「インゲームに集中出来る」だと思います。
インゲームは「メインのゲームロジックが動く箇所」という意味を指しています。
なので、ビルドの設定、開発環境の構築、タイトル画面などはインゲームに含まれません。
上記の説明を読み返してもらえばわかりますが parcel と phina.js を使えばインゲーム以外の部分は最小のコストで実装出来ることがわかります。
そのため、parcel と phina.js の組み合わせでは「インゲームによりコストをかけた開発」が行えます。

一連の記事では parcel と phina.js を使ってゲーム開発環境の構築方法について解説していきます。
といっても、ほとんどないので後半では、webへの公開方法やスマホアプリやデスクトップアプリとしてビルド・公開する方法の解説を行います。
少しでも parcel と phina.js に興味を持っていただければ幸いです。

サンプルに関して

サンプルコードは全て github に上がっています。
一連の記事ではポイントのみ説明しているので、わかりにくい箇所はサンプルコードを直接確認してください。

最小構成サンプル

github.com

おすすめ構成サンプル

github.com

electron を使う場合のサンプル

github.com

作業環境

本記事の作業環境は以下の通りです。

  • mac book air 10inch
  • macOS high sierra
  • node は nodebrew を使ってインストール
  • node は v9.3.0
  • npm は v6.2.0
  • ブラウザは chrome でバージョン 67.0.3396.99

ご自身が作業する環境に合わせて設定ややり方が異なる場合があるので、ご注意ください。

node はすでにインストールされている前提で話を進めます。
まだインストールされていない場合はインストールしてください。

今後の開発のことを考えると nodenv や nodebrew など複数の node のバージョンを切り替えられるようにしておくことをオススメします。


次の記事

orange634.hatenablog.com