gal05

さて、今まで「何も考えずコピペするだけ」と題して記事を書いてきましたが、どうです?上手く動きましたか?

今日は、使用したプログラム「begin.js」の中身というか、処理の流れを簡単に説明して行きたいと思います。(詳細は後日記事にします)

初心者の方は「sys.js」は全く気にしないでOKです。これはゲームを動かす為の基本プログラムで通常は変更する必要の無い所です。ゲームを動かすプログラムは全て「begin.js」で作る事になります。

「begin.js」処理の流れ概要

  1. ページが開くとまず「initGame」が動いて、画像の読込みとゲームの初期設定をします
  2. 初期設定が終了すると、次に「execGame」が動き、ここは1/60秒毎に実行されます

これだけ理解すればOKです。その他、HTML5 の canvas がどうとか、何故そう動くのか?等々は今は深く考えないようにしましょう。その辺は自分でゲームが自由に動かせる様になってから興味がある人は少しずつ勉強して行けば良いのです。

まずは何処を弄れば良いの?

初心者の方はまず、プログラムの「execGame」の部分だけに注目しましょう。ここでやってる事は…

  1. GAL「女の子」を動かして、アニメもする
  2. UFO を動かして、アニメもする

今は、たったこれだけの処理しかしていません。「たったこれだけ」って言っても初心者の方や初めてプログラムを見る方は何か暗号の様に見えるかも知れませんね。

プログラムの中が解らなくても、まずはプログラム中の数字の部分を少し違う値に変更してみましょう。例えば114行目の「xpos[UFO] -= 1;」という命令を「xpos[UFO] -= 2;」に変更し「更新」して記事を見てみましょう。UFO の動きが左方向のみ倍の速さになりましたよね?
(注意:WordPress プラグインでキャッシュを使っている方は「更新」の度にキャッシュをクリアして下さい。そうしないと変更が直ぐに反映されませんので…)

それが出来たら…

  1. UFO の右方向の動きも倍の速さにしてみましょう
  2. GAL「女の子」の動きの速さも変えてみましょう
  3. 慣れてきたら、UFO のプログラムをコピーして…
  4. UFO のプログラムの下にペースト追加して…
  5. PLY「勇者」を動かすプログラムを追加してみましょう
// PLY の移動
tim0[PLY]++;
if ((tim0[PLY] & 0x00) == 0) {
    if (flg0[PLY] == 0) {
        xpos[PLY] -= 1;
        if (xpos[PLY] < 0+32) {
            flg0[PLY] = 1;
        }
    }
    else {
        xpos[PLY] += 1;
        if (xpos[PLY] > cWidth-32) {
            flg0[PLY] = 0;
        }
    }
}

こんな感じになると思います。(注意:プレイヤーは画像が1枚だけなのでアニメはしません)

このプログラムは何と言う言語?

プログラムを作成する場合には色々な言語を使います。例えば…

  1. C言語
  2. Java言語
  3. PHP言語
  4. JavaScript言語
  5. HTML言語
  6. その他

等々が有ります。ここでは「JavaScript言語」と言うのを使ってプログラムが書かれています。この言語は「C言語」や「Java言語」と非常に良く似ているのですが、Web プログラム作成用の言語という位置付けになります。

少し専門的なお話

初心者の方はここは読み飛ばして頂いて構わないのですが、慣れてきたら疑問に思う事ですので敢えてココで記事にしておきます。

防衛軍の HTML5 プログラムでは、将来の拡張性を考えて「CreateJS」という外部ライブラリーを併用しているのですが、少し普通の使い方ではありませんので、その辺の所を下記に説明します。

CreateJS の SpriteSheet 機能

通常、CreateJS を使う方は、その機能である「Sprite」や「SpriteSheet」「Tweenアニメーション」等を使います。しかし、「Tweenアニメーション」を使う場合には「Sprite」機能を使う事になり、「Sprite」を使うためには「SpriteSheet」を使う事になります。

所が「SpriteSheet」を使う場合、アニメとして切り替える画像を全て1毎の大きな画像内に整然と並べておかなくてはなりません。作るクソゲーによって当然、登場するキャラやアニメが変わる訳で、その度にそれらを整然と並べた大きな画像を再構成する必要がある訳です。確かにスマホアプリでもこの方法は良く使う手法ではありますが、私の場合、毎回この作業をする事が面倒くさいです。

私は、画像の再構成せずに、画像を単品で使い回したい!と思うのです。

CreateJS の SpriteSheet は使わない

と言う事で私は「SpriteSheet」は使いません。と言う事は「Sprite」や「Tweenアニメーション」機能も使えません。しかしこの代償は大きく、それらの機能に備わっている動きやアニメーション等が一切使えなくなります。つまりそれらの機能は全て自力で実現しなければならなくなります。

しかし、私の HTML5 でクソゲーを作る目的は、スマホゲームの様なちゃんとしたゲームを作りたい訳ではなく、WordPress 記事内に於いて「ちょこっとクソゲー」を映して記事を目立たせようとする事なので、「Sprite」の動きも、アニメーションも不要なんです。それよりもサクッと HTML5 クソゲーを作る為に、単品画像を使い回せる方が重要なんです。

結果、CreateJS の「SpriteSheet」「Sprite」「Tweenアニメーション」は使わない前提でプログラムを作成しています。

BitMap 方式で画像を表示

前述の判断から、私の場合は画像を「BitMap」方式で表示しています。このやり方ならば、画像を単品で使い回す事が出来るのでいちいち画像を再構成する必要が不要になります。

私が目指すちょこっと HTML5 クソゲーでは登場キャラも少ないので、BitMap 方式がメモリー効率悪くても関係ないし、それよりも簡単に作れて、速度も60FPSが保証されれば、それでOKなんです。

欠点としては、前述したように「動き」や「アニメーション」を全て自力で行う必要がある事位なんですが、それとても私が目指すクソゲーレベルでは問題にならず、逆に私は「CreateJS の Sprite」機能である「動き」のプログラムの方が意味不明というか、使うの面倒です。全部自分で動かした方がやり易いです。

まとめ

以上をなんとなく理解した上で私のプログラムを見て頂くと理解も早まるのではないかと思います。ただこれは私流のやり方で、人それぞれ考え方でプログラミングのやり方は異なると思いますので、あくまで参考と言う事で…ねっ♡