勉強の為に転載しました。
■phina.jsとは
phina.js(フィナ ドット ジェイ・エス) は, JavaScript で作られた国産のゲームライブラリです.
出典
プログラミング初心者でも始めやすく, それでいて上級者のハイレベルな要求にも 応えられる, 柔軟な設計と豊富な機能を備えています.
出典
ゲームプログラミングをする上で, 「ゲームの作り方」の大まかな枠組みも提供しています.
出典
初心者でもカンタンに扱えて, 上級者であれば自分好みにカスタマイズできる, そんな幅広いニーズに応えるべく開発が続けられているゲームライブラリ. それが phina.jsです!!
出典
- アイディアを即座に形にできるゲームライブラリです
- 初心者でも手軽にゲームを開発できます
- 様々な Web コンテンツ, アプリで多数の採用実績があります
- 大学や専門学校といった教育機関で利用されています
- 国産かつオープンソースでTwitter 駆動開発なので気軽にコントリビューターになれます
出典
Author ... phi
出典
作った方ですね。
ファイさんというみたいです。
ファイさんというみたいです。
License ... MIT
出典
■機能について
基本機能
コア機能拡張によるリッチな開発環境
シンプルに使えるクラス定義, 継承や大規模開発を想定したネームスペース管理
HTML5 Canvas をラップした便利描画クラス
出典
ゲーム開発
解像度を維持して自動で画面にフィット(PC, スマホ同時対応)
親子構造(Node)
画像やラベル, 図形といった要素のサポート
ボタンやダイアログ, ゲージといった便利クラス
衝突判定処理
トゥイーンアニメーション
行列やベクトル計算できるクラスを内包
サウンドの再生(WebAudio wrapper)
入力系(キーボード, タッチ, アクセラレーション, ゲームパッドなど)のサポート
マルチタッチのサポート
Three.js とのお手軽連携
などなど
出典
■phina.js の使い方
<!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='http://cdn.rawgit.com/phi-jp/phina.js/v0.1.1/build/phina.js'></script>
<!-- メイン処理 -->
<script src='main.js'></script>
</head>
<body>
</body>
</html>
出典
index.htmlのサンプル。
CDNから直接読みこむだけ。簡単!
CDNから直接読みこむだけ。簡単!
phina.globalize();
phina.define('MainScene', {
superClass: 'CanvasScene',
init: function() {
this.superInit();
this.backgroundColor = '#444';
this.label = Label('Hello, phina.js!').addChildTo(this);
this.label.x = this.gridX.center();
this.label.y = this.gridY.center();
this.label.fill = 'white';
},
});
phina.main(function() {
var app = GameApp({
startLabel: 'main',
});
app.run();
});
出典
「Hello, phina.js!」を表示するだけの簡単なサンプルですね。
ここでの文字制限のため、日本語で説明していた文を削除しました。
ここでの文字制限のため、日本語で説明していた文を削除しました。
■試そう
思いたったらすぐ開発, プログラミングに革命を...
Runstantというサイトを利用すると、ブラウザ上でphina.jsを試すことが出来ます。
上記のリンクをクリックすると、phina.jsの最小サンプルが書かれた状態で始めることが出来ます。
上記のリンクをクリックすると、phina.jsの最小サンプルが書かれた状態で始めることが出来ます。
■実際に出来たゲーム
phi I'm a Game Programmer and Frontend Engineer passionate about programming education. Math / C / C++ / C# / JavaScript / HTML5 / CSS3 / Python phiary Just a creator blog phina.js を使って 100 行縛りでゲーム作っ…
100行縛りと言いつつも、見やすいコードで説明もちゃんと付いているから素晴らしい。
記事の中では詳しく処理内容の説明もあって、わかりやすい。
記事の中では詳しく処理内容の説明もあって、わかりやすい。
はじめに前回は、Tweenerを使ったアニメーション処理を追加しました。今回は最終回として、ゲームオーバーとクリア処理を追加したいと思います。 ゲームオーバー処理ボールが画面下に落下したら、GAME OVERという文字を表示してタイトル画面に戻るようにします。コードは以下のとおりです。 コード説明93から111行目// 落下var self = this;if (ball.top > s
8回に分けてブロック崩しのゲーム作りを紹介していて、とてもわかり易いです。
■備考
phina.js は, この tmlib.js の正式な後継ライブラリに当たります.
出典
tmlib.jsも結構便利なライブラリでしたが、その後継ライブラリでしたか。
phina.jsは, みんなで意見や要望を交わし合って成長してきた
~みんなで作る, みんなのためのライブラリ~
なのです!!
出典
コミュニティに参加すれば、誰でも一緒に開発に参加できるということですね。
■リンク集
Where developers come to talk Free for communities Join over 230k developers Join over 35k communities Discuss projects & code Create your own community Deeply integrated with GitHub Free, forever. G…
こちらがコミュニティになるそうです。
phi(ファイ) (@phi_jp)さんの最新ツイート スーツじゃない方のエンジニア 福岡出身 多分27歳 i love #js Binary, world!
javascriptのゲームライブラリphina.jsにハマっています。I am crazy about a javascript library named phina.js
alkn203さんという方がブログ内で実際に作成するチュートリアルを紹介しています。
0 コメント:
コメントを投稿