ジャンル雑多なゲーム・ゲーム制作関連の色々な情報を取り扱っているブログ。最近はBlenderについてが中心。
ゲームライブラリ『phina.js』試してみた

ゲームライブラリ『phina.js』試してみた

私の経験というか、知ってればよかった…。と思ったので、ゲームライブラリのphina.jsについて、少し調べてわかったこと、使ってみた感想を書かせていただきますね。

※2018年10月18日 加筆・修正を行いました。
※2020年9月11日 加筆・修正を行いました。

前回の記事で悩みに悩んでたレスポンシブ対応の件なのですが、その後も色々ネットで情報探し回っててふと、そういえばゲームライブラリってどんなのか全然調べてなかったな、と思ってちょっと調べてみたんですよ。(本当に情報原人だわ私)

とりあえず件のRunstantを調べていた時に何かと目にしていたphina.jsってものから。

関連記事リンク:Canvasで描画するんならRunstantを知っといて損はなし!

そしたら少し調べただけで、散々悩んでた画面サイズに合わせてちゃんと表示されるような仕様がたったコード数行でできるとか!

ゲームライブラリ凄い!って感動しました(;ω;`)確かに始めは書き方覚えなきゃいけないんですけど、JavaScriptだけだとすごい行のコーディングしなきゃいけない動作が、少ない行数で済むってすごいですね!作業効率上がりまくりますね!

以下公式サイトからの引用

ゲームやツールを簡単に作る事ができるJavaScriptゲームライブラリだよ♪

PCとスマートフォンどちらでも動くんだ

『プログラミングって気軽にできるもんなんだ』『ゲームってこんなに簡単に作れるんだ』って感じてもらえると嬉しいな

phina.js公式サイトより引用

オープンソースで、国産のライブラリだそうですよ。また、Runstantを作られた方と同じ方が作られたんだそうです。(すごい・・・。)

そして、使い方は、phina.jsをHTMLに貼り付けて、後はコード書いていくだけらしくて、テンプレートのファイルもダウンロードできるみたいですが、本当に何もなくても始められるみたいで、これから私も勉強していこうと思います!もっと詳しく知りたい方はこちらから → phina.js

後日追記:上記リンクの公式サイトでは、index.htmlで、phina.jsを読み込むコードが、

<script src='http://cdn.rawgit.com/phi-jp/phina.js/v0.2.0/build/phina.js'></script>

と、なっていますが、RawGitサービス終了に伴い、今後は他のサービスを利用しての読み込みが必要になるかと思います。
参考までに私の場合ですが、代替にjsDelivrを利用させていただき、そうした場合のコードは下記になります。

<script src='https://cdn.jsdelivr.net/gh/phi-jp/phina.js@0.2.3/build/phina.js'></script>

公式サイトのindex.htmlのコードを私のやり方に直したソースコードを貼っておきます。

<!doctype html>

<html>
<head>
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <title>Getting started | phina.js</title>
    <!-- phina.js を読み込む -->
    <script src='https://cdn.jsdelivr.net/gh/phi-jp/phina.js@0.2.3/build/phina.js'></script>

    <!-- メイン処理 -->
    <script src='main.js'></script>
</head>
<body>

</body>
</html>

勉強の仕方なのですが、これは個人の好みとかもあると思いますが、数々のサンプル(一見の価値あり!)もRunstantで公開されていますし、公式サイトでもRunstantでの勉強がおススメされていますので、Runstantを使って習得するのが良いのではないかと思います。ちなみに大変参考にさせていただいた公式サイトのページがこちら → とりあえず試してみたいって方のためのphina.js入門|phiary

後日追記:上のリンクは情報が古いので、今から始められる場合、こちらのページがおススメです→phina.js Tips集

削除しました:ちなみにほぼ勢いで作ってみたものです↓ 上から降りてくる星をクリック!本当はシーン遷移もやりたかったんですが、ちょっとうまくできなかったので、たぶん後日修正します。

後日追記:この時に試しに作ったものを完成させたゲーム→【クリックゲー】降って来る星をクリックするだけのゲーム

Pocket

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください