phina.js が面白そうなのでお勉強中 その２

phina.js が面白そうなのでお勉強中　その１

基本的なことが解らん・・・。

そんなわけで、キャラクターが動くようになったプログラムをいろいろ触ってみてさらにハマった所。

spritesheet を使わなくても画像を切り出せる

Spriteで画像を指定すると、画像全体が指定されたサイズに変形されて表示されるので、てっきり切り出せないと思ってたけど、frameIndex にフレーム番号を設定すれば指定されたサイズ単位で切り出せるのが解った。
画像を切り出すには、アニメーション不要でも spritesheet が必須と思ってました。

setSize を使うと、frameIndex で取得する画像サイズまで変わってしまう

大きい画像を作るのが面倒なので、3232の画像を6464の大きさで使おうと思っていたのですが、setSize を使うと frameIndex が想定通りに機能しなくなるため諦めた。
setScale で拡大すれば、frameIndex は想定通りなんだけど、Spriteのtopの値とかがそのままなのでいろいろ面倒そうで諦めた。

画面の解像度を下げればいいじゃん

画像を拡大するからややこしいのであって、解像度を下げればいいのでは、と思い

phina.main(function() {
	// アプリケーション生成
	var app = GameApp({
		startLabel: 'main', // メインシーンから開始する
		// アセット読み込み
		assets: ASSETS,
		width: 320,
		height: 480,

ってしたけどうまくいかなかった。

MainSceneのサイズがデフォルトのままだからっぽい。

「phina.jsで画面サイズを変更するときに失敗したのでメモ」
https://qiita.com/_yukihito/items/0cabcc8cb289e75eddb6
を参考に
MainSceneを

phina.define('MainScene', {
	superClass: 'DisplayScene',
	init: function(option) {
		this.superInit(option);

ってoptionを受け取ってsuperInitに渡すと、GameAppで設定したサイズになってくれた。
っていうか、こっちをひな形にしてくれた方が幸せな人が多いと思うんだけど・・・・。

今日の成果

なし！
でも、表示周りがなんとなく解ったので、次は弾の発射をさせようと思ってます。
自機が動かせて弾が発射できればそれだけで楽しいもんね。

phina.js が面白そうなのでお勉強中　その３