りよねこたわ~

ロールプレイングゲーム作ってみたいにゃ~でもどうしたらいいのにゃ~?

壁の画像がちらついて見えるにゃ~

ω・`) 前から気になってたんにゃけど、3Dダンジョンの画面がちらつく?ときがあるんにゃ~。

ω-`) ちらつくっていうかにゃ~、うまく表現できないにゃ~。

 

ω・`) このゲームは、2Dマップの上に背景画像を被せて、その上に壁画像を表示させてるんにゃ~。

ω・`) 方向転換したり前に進んだりしたときに、その画像を更新して3Dダンジョンのように見せてるんにゃ~。

ω-`) なんていうのかにゃ~、ちゃんと壁画像は表示されるんにゃけど、更新される一瞬背景がみえちゃってるんにゃ~。

 

ω・`) 調べてみたら、それっぽい症状のことがでてきたにゃ~。

ω・`)っ ピクチャの表示について - ツクマテ

 

ω・`) なるほどにゃ~、ツクールMVの仕様なのかにゃ~。

ω・`) あらかじめ画像を表示させておくといいのかにゃ~?

さっそく試してみないとにゃッ!(`・ω・´)シャキーン

 

そろそろ次の段階にいけるかにゃ~?

ω・`) 20枚目のマップのイベントと、第1部のエンディングを作成中にゃ~。

ω・`) うにゃ~?前回と同じにゃ~?

ω-`) き、気のせいじゃにゃいかにゃ~?w

 

ま~くん 「りよちゃん、進み具合はどう?」

ω-`) 「順調に遅れてるにゃ~w」

ま~くん 「またいつもの悪い癖で、あちこち寄り道してあれこれ機能付け加えてたんじゃないの?」

ω-`) 「ち、ちが・・・わなくなくないにゃ~w」

ま~くん 「ほどほどにしないとね。」

ω・`) 「大丈夫にゃッ!そろそろ全体通してテストとかバランス調整とかに入るんにゃッ!」

ま~くん 「お~、もちろんテストは手伝うよ。」

ω・´) 「もちょっと待っててにゃッ!(`・ω・´)シャキーン」

 

このゲームの3Dダンジョンはこんな感じでできてるにゃ~【その7にゃ~】

ω・`) 20枚目のイベントと、第1部のエンディングを作成中にゃ~。

w▼´) ふふふにゃ~、マップとイベント作成も大詰めってところかにゃ~?

ω・`) このあとは、全体のマップとイベントを見直して修正、全体のテストって流れになると思うにゃ~。

 

ω・`) 前回はタイルセット毎に壁を定義したから、今回はそれをもとに壁画像を描画していくにゃ~。

詳しいことは、以下のURLに載ってるから見てみてにゃ~。

lucky-duet.com

 

まずは、次のような背景画像を用意するにゃ~。

ファイル名は「background.png」で、置く場所はプロジェクト内の「img/pictures」にゃ~。

f:id:riyoneko:20180523180049p:plain

この画像を以下のスクリプトで2Dマップ上に表示するにゃ~。

//////////

var background = new Sprite();

background.bitmap = ImageManager.loadPicture('background');

background.x = 0;

background.y = 0;

this.addChild(background);

//////////

ω・`) ちょっと(かなり)省略しちゃったかにゃ~?w

これでテストプレイすると、次のような画像になるにゃ~。

f:id:riyoneko:20180523180114j:plain

ω・`)b 左が背景画像を被せる前で、右が背景画像を被せた後にゃ~。

ω・`) あとは次のような壁画像を作って、同じ要領で読み込むんにゃ~。

f:id:riyoneko:20180523180150p:plain f:id:riyoneko:20180523180205p:plain f:id:riyoneko:20180523180240p:plain f:id:riyoneko:20180523180300p:plain

ω・`) 描画する位置は、xとyの値で調整するにゃ~。

一枚ずつ描画していくイメージにゃ~。

f:id:riyoneko:20180523180639g:plain

どうかにゃ~?3Dダンジョンに見えるかにゃ~? 

 

ω・`) これで、このゲームの3Dダンジョンがどういうふうにできているか、だいたい説明できたかにゃ~。

ω-`) これって3Dダンジョンっぽく見せてるから、疑似3Dダンジョンっていうのかにゃ~?

ω-`) 細かいことはいいんにゃ~。

 

このゲームの3Dダンジョンはこんな感じでできてるにゃ~【その6にゃ~】

ω・`) 19枚目のマップのイベントを作成中にゃ~。

ω-`) うにゃ~?あんまり進んでにゃいにゃ~。

ω-`) 悪い癖がでちゃってにゃ~、ちょこちょこ機能追加しちゃったんにゃ~。

 

ω・`) キャラクターの向きから見える範囲の添え字を取得するところまでできたかにゃ~。

じゃ~取得した添え字から、タイルマップ情報を取得するところから始めるにゃ~。

 

配列a[ ]~e[ ]には添字の情報が入っているから、

//////////

for (i = 0; i <= 4; i++) {

    $dataMap.data[a[i]];

//////////

ってスクリプトで、タイルマップ情報を取得できるにゃ~。

$dataMap.data[ ]は、dataフォルダにあるMap???.jsonファイルの配列dataの値が取得できるにゃ~。

 

タイルセット情報(タイルセット番号かにゃ~?)が取得できたら、次はタイルセット番号の定義かにゃ~。

つまりそのタイルセット番号がどういう壁を持っているかを定義するんにゃ~。

f:id:riyoneko:20180425174555p:plain

例えば、この図の赤丸の位置のタイルセット番号を1とするにゃ~。

このタイルセットは、上側に壁、下側に壁があるにゃ~。

このタイルセットの壁を次のように定義するにゃ~。

//////////

switch (wall)

    case 1:

        if ($gamePlayer.direction() === 6) {

            tmp_wall_acenter[i] = 'wall_acenter_clear' + (i);

            tmp_wall_aleft[i] = 'wall_aleft' + (i);

            tmp_wall_aright[i] = 'wall_aright' + (i);

        } else if ($gamePlayer.direction() === 4) {

            tmp_wall_acenter[i] = 'wall_acenter_clear' + (i);

            tmp_wall_aleft[i] = 'wall_aleft' + (i);

            tmp_wall_aright[i] = 'wall_aright' + (i);

         } else if ($gamePlayer.direction() === 2) {

            tmp_wall_acenter[i] = 'wall_acenter' + (i);

            tmp_wall_aleft[i] = 'wall_aleft_pass' + (i);

            tmp_wall_aright[i] = 'wall_aright_pass' + (i);

          } else if ($gamePlayer.direction() === 8) {

            tmp_wall_acenter[i] = 'wall_acenter' + (i);

            tmp_wall_aleft[i] = 'wall_aleft_pass' + (i);

            tmp_wall_aright[i] = 'wall_aright_pass' + (i);

         };

        break;

//////////

このように、上下左右を向いているときの見えている壁を定義するんにゃ~。

tmp_wall_???は、ローカル変数にゃ~。

そのローカル変数に文字列を代入しているんにゃ~

この文字列はそのうちでてくるんにゃけど、画像ファイルを指しているにゃ~。

例えば、右を向いている($gamePlayer.direction() === 6)時、目の前には壁はないからここでは'wall_acenter_clear'って定義しているにゃ~。

右を向いている時、左手側(上側)に壁があるから、'wall_aleft'って定義してるにゃ~。

同様に、上を向いている($gamePlayer.direction() === 8)時、目の前に壁があるから'wall_acenter'、左右の方向に通路が伸びているから'wall_aleft_pass'、'wall_aright_pass'ってそれぞれ定義してるにゃ~。

 

タイルセット毎に壁を定義したら、それをもとに壁を描画していくにゃ~。

 

っ´ーωー`)っ 眠くなってきたから、続きは次回にゃ~。

 

このゲームの3Dダンジョンはこんな感じでできてるにゃ~【その5にゃ~】

ω・`) 19枚目のイベントを作成中にゃ~。

 

ω・`) 前回は、キャラクターの座標を取得して、それをもとに配列からタイルセット情報を取得するところまでだったかにゃ~。

今回は、キャラクターの向きから見える範囲の配列の添え字を取得するにゃ~。

 

まずはキャラクターの向きなんにゃけど、RPGツクールMVでは次のスクリプトから取得できるにゃ~。

//////////

$gamePlayer._direction

//////////

これで右を向いていれば「6」、左を向いていれば「4」、下を向いていれば「2」、上を向いていれば「8」という向きの情報が取得できるにゃ~。

 

次は、向いている方角の見える範囲の添え字を取得していくにゃ~。

また例の画像を使うにゃ~。

f:id:riyoneko:20180425174555p:plain

この画像の赤い範囲が見える範囲なんにゃけど、めんどくさいから次のような範囲の添え字を取得するようなスクリプトを考えてみるにゃ~。

f:id:riyoneko:20180509181043p:plain

 

//////////

if ($gamePlayer._direction === 6) {

    for (var j = 0; j <= 4; j++) {

        a[ j ] = i + j;

        b[ j ] = i - (10 - j);

        c[ j ] = i + (10 + j);

        d[ j ] = i - (20 - j);

        e[ j ] = i + (20 + j);

    };

} else if ($gamePlayer._direction === 4) {

//////////

if文で向きを判定してるにゃ~。

if ($gamePlayer._direction === 6) は右を向いているときにゃ~。

そのときに、for文を実行するってわけにゃ~。

a[ ]はキャラクターのいるブロックの見える範囲にゃ~。

これは簡単にゃ~。

添字は、マップの左上から右下にかけて右に順番にならんでいるから、右を向いているときはのa[ ]は、i(添え字)に1ずつ足していけばいいにゃ~。

b[ ]は、キャラクターの上のブロックの添字を取得するようになってるにゃ~。

jが0のときは、添え字は10個前の位置にゃ~。

jが1のときは、添え字は9個前の位置にゃ~。

という感じで、キャラクターの向きから見える範囲の添え字を取得することができるにゃ~。

 

添え字が取得できたら、次はタイルマップ情報を取得するにゃ~。

 

っ´ーωー`)っ 眠くなってきたから、続きは次回にゃ~。