アフィリエイト広告を利用しています
最新記事
検索
プロフィール
てぅちかさんの画像
てぅちか
  • ・禁煙4年目
  • ・禁パチ挫折
  • ・禁睡眠薬2年目
  • ・猫様との同居生活2年目

 ブログランキング・にほんブログ村へ

にほんブログ村 ゲームブログ ブラウザゲームへ
にほんブログ村 IT技術ブログ JavaScriptへ
プロフィール
最新コメント
現在HTML調整中・・・・・・ by てぅちか (04/16)
月別アーカイブ
タグクラウド
ブログはこちらからお借りしてます A8ネット A8ネット サーバーはこちらを……借りたい ミックスホスト ミックスホスト エックスサーバー エックスサーバー

広告

posted by fanblog

2021年05月10日

【PIXI】サンプルを読み解く【JavaScript】

連休は何もできなかったので今日はじっくりやるぞ!

■参考サイト
今日はサンプルソースをほぐして、分かるところから見ていきます!
にほんブログ村 IT技術ブログ JavaScriptへ
ソースは全部「script.js」の内容です。

15| //画像をプリロードしてからイベント呼び出し
16| PIXI.loader.add("img_t.svg");
17| PIXI.loader.load((loader,resources) => {});

17行目、ロードが終わった後の処理を書き写しながら勉強していきましょう。{ }中カッコの中に処理を書き込んでいきます。

I did it !

  • JavaScript:入れ子構造1階層下まで読む
  • PIXI:リファレンス(tickerとstage)



JavaScript:入れ子構造1階層下まで読む


前回から見ると、入れ子階層のひとつ内側に入ります。
サンプルスクリプトから、コメントを抜き出してきました。

15| //画像をプリロードしてからイベント呼び出し
16| PIXI.loader.add("img_t.svg");
17| PIXI.loader.load((loader, resources) => {
18|  // 状態が変化する変数
19|  // 毎フレーム処理を追加する関数
20|  // 登録している毎フレーム処理を全部削除する関数
21|  // 全てのシーンを画面から取り除く関数
22|  // ボタンを生成してオブジェクトを返す関数
23|  // ゲームのメインシーンを生成する関数
24|  // ゲームの結果画面シーンを生成する関数
25|  // 起動直後はゲームシーンを追加する
26| });

うーん?
分かるような分からないような…。
もう一階層(ところにより二階層)深く見ていきましょう。
思考整理のために、いったんソースコードと言うよりメモとして書き写します。
ちなみに変数「app」は、前の記事で記述した400px*600pxのゲーム領域です。

PIXI.loader.load((loader, resources) => {

// 状態が変化する変数
 //let で定義 gameLoops[] score ballVx ballVy

// 毎フレーム処理を追加する関数
function addGameLoop(gameLoopFunction){
 app.ticker.add(gameLoopFunction); //毎フレーム処理として指定した関数を追加
 gameLoops.push(gameLoopFunction); //追加した関数は配列に保存
}

// 登録している毎フレーム処理を全部削除する関数
function removeAllGameLoops(){
 app.ticker.remove(); //forで繰り返して追加した関数をtickerから解除
 gameLoops = []; // gameLoopsを空にする
}

// 全てのシーンを画面から取り除く関数
function removeAllScene(){
 app.stage.removeChild(); //forで繰り返して既存シーン全削除
}

// ボタンを生成してオブジェクトを返す関数
function createButton(,,,,){
 //ボタンパラメータ指定、引数でonイベント受け取り
 return buttonContainer;
}

// ゲームのメインシーンを生成する関数
function createGameScene(){
 removeAllScene();
 removeAllGameLoops(); //初期化
 score = 0;

 const gameScene = new PIXI.Container(); //ゲーム用シーン生成
 app.stage.addChild(gameScene); //シーンを画面に追加

 //ボールobj設定とクリックイベント、スコア表示テキスト設定
 gameScene.addChild(ball); //ボールをシーンに追加
 gameScene.addChild(text); //テキストをシーンに追加

 function gameLoop(){ //毎フレーム処理するゲームループ
  //スコアチェックと反映。0なら抜ける
  //ボールの動き反映
  //ボールが画面下に消えたらcreatEndScene();
 }

 addGameLoop(gameLoop); //ゲームループ関数を毎フレーム処理の関数として追加
}

// ゲームの結果画面シーンを生成する関数
function createEndScene(){
 removeAllScene();
 removeAllGameLoops(); //初期化

 const endScene = new PIXI.Container(); //エンド用シーン表示
 app.stage.addChild(endScene); //シーンを画面に追加

 //結果表示テキストとボタン設定
 endScene.addChild(text); //テキストをシーンに追加
 endScene.addChild(retryButton); //リトライボタン追加createGameScene();
 endScene.addChild(tweetButton); //ツイートボタン追加window.open();
}

// 起動直後はゲームシーンを追加する
createGameScene();

});

一部説明のみですが、ざっくり関数を持ってきました。

なんとなくやってることが理解できたような気がする?
赤文字部分がキーポイントなのは分かるのですが、具体的な動きがよく分からないぞ!(ど素人故の無知発揮です)

PIXI:リファレンス(tickerとstage)

 ticker.add(関数); まずはこれを調べよう!

英語はブラウザの翻訳機能を使って読んでいるので間違っているかも知れませんが、
とりあえず「ticker.add(関数)」で関数を登録したら、
「ticker.remove(関数)」で削除されるまで繰り返し呼んでくれることは分かった!
サンプルソースでは、登録と削除の関数を最初に記述して、ゲームの起動とロードの後に登録を実行するようにしてあるようです。
そして、登録された関数「gameLoop()」がゲームを動かしています。

次は、stage.addChild(シーン); を調べるよ!!
ああ、そうか!これステージか!!
教科書にさせて頂いている作っちゃうおじさんが参考ページで解説してらっしゃいました。
ルートコンテナ(ステージ)に、子コンテナ(シーン)を追加するときの書き方だったんですね。
文章で読んでて理解しているつもりなのに、ソースと見比べても理解が浅くてびっくり。

いや、逆に考えよう。
こうやって英語のリファレンスで理解出来たんだからすごいよ!


サンプルソースではコンテナを丸ごと作ったり消したりして、プレイ中・結果表示などのシーンを移動しているようです。

てぅちかは『シーン変数を用意しておいて、この値だったらこの表示へ飛ぶ』という感じの書き方しかしてこなかったので、目から鱗でした。それはもうcase分岐のお手本のような書き方だったよ。


さて、今日はここまで!
ソースを眺める時間より、ブログを書く方が時間がかかりますね。
コピペせずに何度も打ち込んでるので少し慣れてきた気もします。

まだ何も動かせてないけどね!!
現状をブラウザで見るとこんな感じ。
ss_20210507vsc03.png
全く変わってないよ!読んでただけだから!!コメント書いただけだから!!!
自分のペースでゆっくりやります。(^^)
この記事へのコメント
コメントを書く

お名前:

メールアドレス:


ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバックURL
https://fanblogs.jp/tb/10717762
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
×

この広告は30日以上新しい記事の更新がないブログに表示されております。