1MAP_STG キャラをグラフィックにする


2018年 5月12日
 
 
 キャラをグラフィックにする。

 座標と当たり判定をすっきりさせ、さらにグラを回転させて向きを表現する。

 それからスマホ向けにマウスカーソルでは無くて「照準」のグラを用意する。
 スマホではカーソル表示は無いため。


 
 
 グラフィック

 自機

 ショット

 敵

 照準

 使用する場合は「名前をつけて画像を保存」でダウンロードして下さい。

 
 
 ソース

 
 

プログラム解説

初期設定

pai=3.141593
pai2=pai*2

rad45=0.7853982 ; ラジアンで45度
rad90=1.5707965 ; ラジアンで90度

 円周率。
 円周率の値は決まっているため、ラジアン用に 45度、90度、180度(1π)、360度(2π)を用意する。

 ゲームプログラムの時は大体書いてる。
 
 
gmode 2
 表示モード、これを書かないとブラウザで PNGの透明を抜いてくれない。
 
 
jw=1 : jo=20 : jo2=jo/2 ; 自機
 celload “jiki_1.png”,jw
  celdiv jw,jo,jo,jo2,jo2

jw=1 : 自機のグラフィックバッファNo.
jo=20 : 大きさ、今回はグラの縦と横の大きさが同じとして扱う。
jo2=jo/2 : 半分の大きさ。

celload “jiki_1.png”,jw
 グラを読み込む命令。
 jwバッファに jiki_1.pngを読み込む。

celdiv jw,jo,jo,jo2,jo2
 読み込んだグラフィックバッファの設定。
 jw=設定するバッファNo.。
 jo,joは番号振りの区切りの大きさ(今回は 1枚絵のため関係無い)
 jo2,jo2=表示の中点座標、jo2はグラの大きさの半分のため posで設定した座標にグラの中心点が来るように表示される。
 つまり前回は posの座標がキャラの左上座標だったが、今回は posの座標がキャラの中心点になる。

 それから今回はグラの回転表示を行うが、その再の中心点になる。
 
 
jx1=jx-jo2 ; 自機左座標
jx2=jx+jo2 ; 自機右座標
jy1=jy-jo2 ; 自機上座標
jy2=jy+jo2 ; 自機下座標

 当たり判定用の 4辺端座標。
 ショットと敵もそうだが、今回はあらかじめ計算しておく事で判定時の計算を省き、高速化するのとソースを見やすくする。

 たぶんこの程度のプログラムなら速度に影響は無い。
 jx,jyは中点座標になるため、4辺端はそこからそれぞれ半分の大きさの距離となる。
 
 
ddim er,eb ; 向き
 今回は敵のみ向きに従って回転表示を行う、その回転値。

 
 
メインルーチン

sx1,sx2,sy1,sy2、ex1,ex2,ey1,ey2
 今回はこれらショットや敵の当たり判定用の 4辺座標をあらかじめ用意しておく事で、見た目にもスッキリしたと思う。

 合わせて場外判定のソースも分かりやすくなった。
 
 
er(cnt)=-rad+pai ; 向き
 これで敵が自機の方を向く角度を設定できるが、なぜそうなるのかは自分は理解してない。
 rad(角度)値を -にして pai(3.141593)を足すとうまく行ったというだけの思考錯誤の産物。

 そもそも celput(グラ表示)のラジアンの値も独自のような気もするし

 つまりプログラム的には真上が 0で、時計周り(右回り)に真下までが π(パイ(3,141593))で、そこから真上が 2π(6.28・・・)という仕様らしい。

 これはグラフィックが普通上向きだから 0が正位置なら合理的なんだと思う。

 今回用意した敵のグラも正位置で上向きだし。
 ←0でこの向き

 
 
表示

pos ex(cnt),ey(cnt) : celput ew,,,,er(cnt) ; 敵
 celput が HSPdish用のグラフィック表示命令になります。
 先に設定した posの座標に表示します。
 ew=グラのバッファNo.
 er=回転表示角度。

 間の,,,,には、その画像バッファの何番目の画像を表示するか(celdivで区切った)と、xとyの拡大縮小表示率が設定できます。

 
 
 今回ショットの大きさを 6ドットにし、当たり判定もその大きさで計算してるので、前回よりエイム(狙う)要素が増したと思います。
 
 

コメントを残す

メールアドレスが公開されることはありません。