行き当たりばったりゲーム制作

さて、前回は文字を表示するって言うことをやったけど
今回はキャラの画像を表示させることにするよ
あ、でもその前に結局前回出てきた「シーン」ってなんなのよ？
っていう話になるよね

シーンって映画とかの1シーンとかのシーンか？

そうだね、NGシーンとかのシーン
（・－・）←このキャラのことじゃないよ
正直いまいち説明ができないから
この「シーン」っていう言葉で解釈してほしいな～って

たとえば、前回作ったのはメインシーン
つまりこのシーンではゲームの真っ最中の場面なんだけど
他にも「タイトルシーン」とか、「結果表示シーン」とかあるよ

じゃあ、今はタイトルや結果は別にいらないから
特段気にする必要はないのか

しばらくキャラを動かしたりなんかいろいろやったり、
「メインシーン」の範疇内のことしかしない予定だからまあそういうことになるね

というわけでシーンについてはまた今度って言うことで
早速キャラの画像を表示しよう

とりあえずここのimagesフォルダに画像を準備するよ
Flashはswf内に画像を取り込んだからネット上にアップするときはswfファイル単体ですんだけど
今回はこの画像のフォルダも挙げないといけないから注意ね

それで、画像を貼り付けたい……ところなんだけど、
まずは一旦簡単な図形を表示してみよう

簡単な図形？

phina.jsに最初から搭載されてるというかなんというか、
丸とか三角とか四角とかの基本的な図形ね
そういえば三角四角マルコビッチって何かで聞いたことあるんだけど、なんだっけ？

調べたらみんなのうただな
正確にはらしい

あ～、もう歌詞は全然覚えてないや……

いや、そっちはいいから先進めろよ

あ～っと、なんの話だったっけ？
何もなしにcanvasに図形描くのって実はそこそこ面倒だったりするんだけど、
やっぱりphina.jsがそこらへんをカバーしてくれてるからサラッと描くことが出来るよ

// phina.js をグローバル領域に展開
phina.globalize();

// MainScene クラスを定義
phina.define('MainScene', {
  superClass: 'CanvasScene',
  init: function() {
    // 親クラス初期化
    this.superInit({
      // 画面サイズ
      width: 400,
      height: 300,
    });
    // 背景色を指定
    this.backgroundColor = '#fff';
    
    // 円を表示
    var circle = CircleShape().addChildTo(this);
    circle.x = 50;  // x座標を指定
    circle.y = 100;  // y座標を指定
    
    // 三角形を表示
    var tri = TriangleShape().addChildTo(this);
    tri.x = 200;
    tri.y = 100;
    
    // 四角形を表示
    var rect = RectangleShape().addChildTo(this);
    rect.x = 350;
    rect.y = 100;
    
  },
});

// メイン処理
phina.main(function() {
  // アプリケーション生成
  var app = GameApp({
    startLabel: 'main', // メインシーンから開始する
    fit: false, // フィットさせない
    query: '#sample01', // キャンバスのIDを指定
    width: 400, //縦のサイズ
    height: 300, //横のサイズ
  });
  // アプリケーション実行
  app.run();
});

背景色は白くしました

これで丸三角四角の出来上がり
ね？かんたんでしょう？

図形を作り出して、位置を変える
これだけでいいのか

いいんです！
さて、本命の画像表示なんだけどやっぱりこれも簡単だよ
まず、っていう名前のオブジェクト変数をつくる

// phina.js をグローバル領域に展開
phina.globalize();

// 外部から画像を読み込む
var ASSETS = {
  image: <画像のオブジェクト>,
};

オブジェクト変数ってなんだ

んーと、ざっくりいうと「キー（名前）」と「値（データ）」で一対一になってるやつをまとめたもの
こんな感じの書き方するよ

{
  <キー1>:<値>,
  <キー2>:<値>,
  <キー3>:<値>,
  ...
}

プログラムの配列を知ってる人は、
配列の番号が0,1,2,3...じゃなくて好きなように設定できるようになったものって考えてくれればいいと思うよ
あと、でいうMap型だね
よくわかんないって人は連想配列でググってね（丸投げ）

{}で囲んでコロンで区切る書き方って最初のmain.jsでもあったな
あれもオブジェクト型なのか

中のデータがむっちゃ長いってだけであれもそうだね
まあ解説は後で後で
で、こんな感じに「名前」と「データ（文字列（URL））」をセットする
オブジェクトの中にオブジェクトが重なってる感じだけど、大丈夫だよね？

// phina.js をグローバル領域に展開
phina.globalize();

// 外部から画像を読み込む
var ASSETS = {
  image: {
    'taiann': './images/taiann.png',
  },
};

画像のパスに注意（とくにHTMLファイルとjsファイルが違うところにあるとき）

画像以外にもなにか読み込めるものあるのか？

ちょっと見てみたらsoundとspritesheetかな
soundは音ってことだよね
spritesheetは画像をアニメーションさせるやつなんだけど、どっちもまたあとでね

あとでやることが多いな……

情報量が多すぎるんだね、仕方ないね
ともかく、ASSETSっていう変数にこんな感じにオブジェクトを作るよ

そしたら、メイン処理のところに追加
このアセットを使ってくださいって書き込むよ

// メイン処理
phina.main(function() {
	// アプリケーション生成
	var app = GameApp({
		startLabel: 'main', // メインシーンから開始する
		fit: false, // フィットさせない
		query: '#sample01', // キャンバスのIDを指定
		width: 400, //縦のサイズ
		height: 300, //横のサイズ
		assets: ASSETS, // 素材を読み込む
	});
	// アプリケーション実行
	app.run();
});

今はまだ画像を使う準備をしただけで表示はされないよ
表示するためにはこう
Spriteに、ASSETSでセットした「名前」を指定するよ

// phina.js をグローバル領域に展開
phina.globalize();

// 外部から画像を読み込む
var ASSETS = {
  image: {
    'taiann': './images/taiann.png',
  },
};

// MainScene クラスを定義
phina.define('MainScene', {
  superClass: 'CanvasScene',
  init: function() {
    // 親クラス初期化
    this.superInit({
      // 画面サイズ
      width: 400,
      height: 300,
    });
    // 背景色を指定
    this.backgroundColor = '#fff';
    
    // 大安を表示
    var taiann = Sprite('taiann').addChildTo(this);
    
  },
});

// メイン処理
phina.main(function() {
  // アプリケーション生成
  var app = GameApp({
    startLabel: 'main', // メインシーンから開始する
    fit: false, // フィットさせない
    query: '#sample01', // キャンバスのIDを指定
    width: 400, //縦のサイズ
    height: 300, //横のサイズ
    assets: ASSETS, // 素材を読み込む
  });
  // アプリケーション実行
  app.run();
});

さっきの図形みたいにaddChildToか……
そもそもaddChildToってなんだ？

それもまたあとでね……で、いよいよ画像が表示されるよ
いざぁ......

見切れてるな
これ、中心点は画像の中央か？

フラッシュだと左上だったけど、
反転させるときとかこっちのほうが都合がいいでしょ？
あ、デフォルトが中央ってだけで自由に設定できるよ

とりあえず全体を写すには……
横の位置を表すtaiann.xと
縦の位置を表すtaiann.yに適当な数値を入れればいいな

露骨な説明だね
まあ、これで簡単な図形と画像を表示させることができたから、次は十字キーで動かせるようにするよ
それじゃ、また次回ね

小休止

あ、そうそう（黒バラ風に）

もう何も言わんぞ

とりあえず、今回の行き当たりばったりゲーム作成(javascript(phina.js))を見るにあたっての
必要な前提知識を整理したいんだけど

それ始める前にやるやつだろ

行き当たりばったりなんだよね、仕方ないね

えーっと、まず大前提

javascriptという言語を知っている

テキストエディタで編集できて、ブラウザで実行するっていうことさえ知ってればいいと思うよ
あ、とか言うのは多分知らなくても大丈夫だよ
アロー関数とかそういうやつは使う予定ないから

var x = 5;
が、xに5を代入したと読み取ることができる

ふと思ったけどなかなかのミーム汚染だよね、これ

alert('hello');
alert();
が、関数（メソッド）の実行ということがわかる

適当な文字列の後ろにカッコで関数の実行ね
カッコの中は値が入ってても入ってなくてもまあ場合によりけりだね
関数っていうのは「とりあえずなんかやってくれるやつ」
アラートの場合はダイアログボックス出してくれるよ

if文、for文がわかる

ifは「～が～～だったら」
forは「～が～～の間」だね

var arr = ['test', 'test2', 'test3'];
が配列だということがわかる

arr[1]でどの文字列が表示されるか、わかるかなぁ、わかんねえだろうなぁ

var obj = {aaa : 'test', bbb : 'test2'};
alert(obj.aaa);
の意味がわかる

さて、今回ちょっと解説したオブジェクト型についてここでも触るよ
この.（ドット）ってなんなのよって話なんだけど
いまobjの中にaaaとbbbのやつを入れたよね
そのobjの中のaaaを見せてちょーだいっていう意味

main.jsのthis.label.xのやつもおなじだな

そう、ていうかjavascriptの変数はすべてオブジェクト型って言ってもいいぐらいだし
上でも言ったとおり配列もオブジェクトの一種だよ
流石に配列はarr.1みたいな書き方できないからarr[1]ってなるけど
obj.aaaはobjっていう書き方でもおんなじようにできるよ

こんぐらいかな？

まあ、またなんかあったら追記するぐらいでいいだろ

それもそうだね
じゃ、今回はここまで！