create.jsに依存したゲーム作成用フレームワーク ゲームのメイン処理の作成に集中できるよう、その他気にしないといけないことはこれがやってくれる
npm install game-capsulecanvas要素を定義し、必要なファイルを読み込む
実装
$3
1. クラスをextendsしたクラスを定義する
2. 定義したクラスにinitメソッド(canvas上で使う変数の定義)とupdateメソッド(fpsに合わせたstageの更新処理)を定義する`
/**
* GameCapsuleを継承したクラスを定義
*/
class Game extends GameCapsule {
constructor (options) {
super(options)
} /**
* stageで使う変数などを定義
*/
init () {
let _this = this
let isRight = true
let movePoint = 1
// このスコープで使うだけのものはlet, constで良い
let shape = new createjs.Shape()
shape.graphics.beginFill('DarkRed').drawCircle(0, 0, 30)
shape.x = this.width / 2
shape.y = this.height / 2
this.stage.addChild(shape)
// updateで使いたい変数や関数はthisで定義する
this.move = function() {
shape.x += isRight ? movePoint : -movePoint
if (shape.x > _this.width || shape.x < 0) {
isRight = !isRight
}
}
}
update () {
this.move()
}
}
// インスタンスを作成する
const game = new Game({
target: '#canvas',
isRetina: true,
isTouch: true,
parent: '#parent',
countDownSeconds: 30
})
$3
1. クラスでインスタンスを生成する
2. 生成されたインスタンスにinitメソッド(canvas上で使う変数の定義)とupdateメソッド(fpsに合わせたstageの更新処理)を定義する`
/**
* まずはインスタンス生成
*/
// オプションで色々設定できる
var game = new GameCapsule({
target: '#canvas',
isRetina: true,
isTouch: true,
parent: '#parent',
countDownSeconds: 30
})/**
* stageで使う変数などを定義
*/
game.init = function() {
var _this = this
var isRight = true
var movePoint = 1
// このスコープで使うだけのものはvarで良い
var shape = new createjs.Shape()
shape.graphics.beginFill('DarkRed').drawCircle(0, 0, 30)
shape.x = this.width / 2
shape.y = this.height / 2
this.stage.addChild(shape)
// updateで使いたい変数や関数はthisで定義する
this.move = function() {
shape.x += isRight ? movePoint : -movePoint
if (shape.x > _this.width || shape.x < 0) {
isRight = !isRight
}
}
}
/**
* メインループ（stage.update()は自動でやるので不要）
*/
game.update = function(e) {
this.move()
}
実行
1. メソッドを実行すると動きだす
2. 動きを止めたいときはpauseメソッドをを実行。止まっている時に再びpauseメソッドを実行すると動きだす
3. 全てを初期化して初めから動かし直したいときはresetメソッドを実行`
window.addEventListener('load', function() {
game.play() // load後自動で再生 // ポーズボタンで動きを止める
document.querySelector('.js-pause').addEventListener('click', function() {
game.pause()
});
// リセットボタンでリセット
document.querySelector('.js-reset').addEventListener('click', function() {
game.reset()
})
})
使い方詳細
オプション
GameCapsuleインスタンスを生成する際に渡せるオプション
$3
対象のcanvas
デフォルトは
$3
window.devicePixelRatioに応じてcanvasやstageの倍率を変えるかどうか
これがtrueだとRetinaの端末で画像がボケたりしない
デフォルトはtrue
$3
stageをタッチイベントをつけるかどうか
デフォルトはtrue
$3
canvasの大きさを決める親要素
ここに指定した要素を元に、canvasの大きさを決める
親の指定がなければブラウザ幅を元にする
デフォルトはnull
$3
ゲーム開始から終了までのカウントダウンをする場合に使う
設定できる単位は秒
設定した秒数が経過した後にメソッドを実行するとtrueが帰ってくる
デフォルトは0（カウントダウンしない）プロパティ
GameCapsuleインスタンスが持つプロパティ
$3
stage.mouseXの値
isRetinaがtrueの時に使うとRetinaに対応した値が取れる
`
gameCapsule.mouseX;
$3
stage.mouseYの値
isRetinaがtrueの時に使うとRetinaに対応した値が取れる
gameCapsule.mouseY;
$3
canvas.widthの値
isRetinaがtrueの時に使うとRetinaに対応した値が取れる
gameCapsule.width;
$3
canvas.heightの値
isRetinaがtrueの時に使うとRetinaに対応した値が取れる
gameCapsule.height;
$3
iPad, iPhone, iPodの場合, それ以外false
gameCapsule.isIos; //-> true or false
$3
Android端末の場合, それ以外false
gameCapsule.isAndroid; //-> true or false
$3
iPad, iPhone, iPod, Androidのいずれかの場合, それ以外false
gameCapsule.isMobile; //-> true or false
$3
ゲームがポーズ状態の場合, それ以外false
gameCapsule.isPause; //-> true or false
$3
play関数を実行してからの時間を取得できる
gameCapsule.totalTime; //-> {ms: 17260, s: 172, m: 2}
メソッド
GameCapsuleインスタンスが使えるメソッド
$3
init関数実行後、update処理を開始
gameCapsule.play();
$3
update処理を止める
update処理が止まっている状態で実行すると再び動き出す
gameCapsule.pause();
$3
stageを全て初期化して、play関数を実行し直す
gameCapsule.reset();
$3
totalTimeを元に表示用に整形した値を取得
引数にtrueを入れるとゼロ詰めされた状態で取得
gameCapsule.getDispTime(); //-> {ms: 9, s: 16, m: 5}
gameCapsule.getDispTime(true); //-> {ms: "09", s: "16", m: "05"}
$3
オプションでを設定しているときに使うことができる
設定した秒数が過ぎてからこのメソッドを実行するとtrueが返される
時間が過ぎていない場合、またはcountDownSecondsを設定していない場合はfalseが返される
`
gameCapsule.isCountDownComplete() //-> true or false
$3
引数の値をwindow.devicePixelRatioで割って返す
isRetinaがtrueの場合、stageとcanvasがブラウザによって倍率が変わってしまうので、そこらへんを揃えるために使う
// window.devicePixelRatio -> 2の場合
gameCapsule.divisionRetina(100); //-> 50
$3
第１引数と第２引数の間の整数をランダムで生成する
gameCapsule.createRandom(1, 10); //-> 1〜10のどれかの整数
$3
数字のゼロ埋め
第１引数にターゲットの数値、第２引数には桁数を入れる
gameCapsule.zeroPadding(33, 5); //-> 00033
$3
ガチャガチャコンストラクタが使えます
ランダムで要素を取り出す時などに便利です
// まずはガチャの中身を作る
var list = [
{
name: 'スライム',
par: 90
},
{
name: 'はぐれメタル',
par: 10
}
]// 第１引数にガチャの中身、第２引数にはパーセンテージを扱うプロパティ名を渡して、インスタンスを作成
var gacha = new gameCapsule.Gacha(list, 'par')
// 設定に応じてランダムでガチャの中身を取り出す
gacha.draw() //-> { name: 'スライム', par: 90 }