Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
18
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

Organization

phina-starter - とりあえずイイ感じにゲームを作り始めたい人のためのボイラープレート

TL; DR

  • JS製国産ゲームライブラリ、phina.jsを使おうと思った
  • イイ感じのボイラープレートがなかった
  • phina-starterを作ってGitHubに上げた
  • 良ければ使ってね

phina.jsを使い始めた

どうも、カタチから入るマンことPちゃんです。
昨日から、以前より気になっていた、新進気鋭のJS製国産ゲームライブラリのphina.jsを使い始めました。

使ってみようとした

開発を始めようと思い、公式サイトを見たがnpmの表記が一切ない。
CDNから読み込んで簡単に使い始められるよ!的なことが書いてあるが、ES6だなんだって言ってる時代にCDNから読み込んで使うのか、うーんとなる。

そう思ったぼくは、Twitterで「phina.js、npmで使えないのがなぁ...」(よく考えれば直接githubのリポジトリ指定してnpm installしろみたいな話ではある)みたいなことを呟いたら、作者の人がリプくれて、リプを返したら、ものの数時間もしないうちにnpmに最新のphina.jsを登録してくださいました。ありがとうございました。

(こういうのが個人開発、国産ライブラリの良いところだと思う)

これで$ npm i phina.jsで最新版のphina.jsがインストールできるようになりました。

カタチから入るマン、ボイラープレートを作る

さてさて、ネットで軽くphina.jsについてググっても、だいたいのサンプルがCDNから読み込んで使っているわけですね。
簡単でとても良いと思うのですが、せっかくなのでもう少しイイ感じに開発を進められるようにしたいです。

そんなこんなで、phina-starterを作りました。

p1ch-jp/phina-starter
A starter kit for phina.js

watchifyを使った自動コンパイル、babelifyを使ったES6対応、budoを使ったローカルサーバー(ライブリロード対応)という感じにしました。

なんとなく気分でGruntやGulpなどのタスクランナーを使わずnpm scriptsだけで動く感じにしました。

使い方

使い方は以下

$ git clone git@github.com:p1ch-jp/phina-starter.git
$ cd phina-starter
$ npm install
$ npm start

http://localhost:9966にアクセスしてphina.jsのバージョンが出たら成功ですので、頑張ってゲーム作ってください。

./build/bundle.jsNo such directory or fileみたいなエラー吐いたらmkdir buildでbuildディレクトリを作ってください。

基本的な構成としては、./src/index.jsでガリガリ書くと、./build/bundle.jsに吐き出されて、それをindex.htmlから読み込み、RUN!!って感じです。

環境ができたところで、ちゃんとゲーム作ります。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
18
Help us understand the problem. What are the problem?