Wio Terminalでゲームを作ってみる勝手企画④

2020年11月10日 14:59

のつづきー。

次の目標は「楽しく遊べること」。

大体ゲーム本体の形は出来上がってきたので、何度も遊びながら手なおししていくことにしましょう。

テストプレイにどれだけ時間をかけられるかが面白いゲームかどうかを決めるのだ。って某ゲームクリエイターさんも言っていますしねー。
やりながらいろんなアイデアを詰めて言って、気が付いたら全然違うゲームになっちゃっていた。なんてことも良くありますｗ（設計段階で気が付こうよｗ）

ついでにやってるうちにいろんなバグに遭遇するだろうから、それも随時直していきましょう。ってことで、ちょっと遊んでいると、いきなり奇妙なバグに見舞われて困ってしまいました。

奇妙なバグ？

なぜかゲームオーバー後にリスタートすると、リスタート直後に、カーソルキーを入れていなくても前回のゲームオーバー時に進んでいたのと同じ方向へてこてこ動いてしまうのです。

おっかしいなー、移動するための変数はちゃんとクリアしているのになんで移動方向だけ生きてるんだろうー。と延々悩みまくり、各位置へSerialPrintして動作を追っていった結果、

※SerialPrintは、シリアル（この場合USB)でつながっているPCに情報を送信できます。今ここで何がおきてるよー。というデータログをPCに送って見て見ることができるのです。デバッグの時にチョーよくやる手です。デバックプリントなんていう人もいます。

↑こういうかんじでPCでデバッグログを見れるようになります。

で、ループカウンタの i が異常な値になってる！！（この i は何個歩くか、１～９までの値になっていないとおかしいところです）

どうやら再スタート直後、メインループの途中のfor文の中のループへ直接舞い戻っている模様。はてさてどうして？？

よーく考えてみるに、

メインループ
　　↓
　　歩行ループ（forループ） → ゲームオーバー → 再スタート
　　　　　　　　　　　　　　　　　　　　　　　　　↓
　　　　　　　　　　　　　　　　　　　　　　　メインループへ

プログラムはこういう構造になっていて、再スタートした後、メインループの中の初期設定等の処理をすっ飛ばして歩行ループに入ってしまているようです。

これはループの設計ミスで、やればやるほどどんどんループが深まっていってしまっていつか爆発（しません）するやつですねぇ。

どうやら、ArduinoIDEの仕様で、setup()処理をした後はひたすらloop()がぐるぐるまわる。というのが意図しない動作の原因だったようです。

ちゃんとループは終了させてからゲームオーバー後の処理をしないといけませんね。

って、わかっているのに面倒だから（おぃ）ためしにGameOver処理の前にi=0を入れてみましたら、無事再スタート時のふしぎムーブはなくなりました。よかった～。

この時点の差分はこんなかんじ。↓のプログラムの差分を見るとSerialPrintしまくっていることがわかりますｗ

こういう出し方もできちゃうGitHubさん優秀ねｗ

一応、ちゃんとforループから抜けてから終了する版もつくっておきました。

↑GitGubの差分リンクを開くとこういうdiff（差分）画面になります。前の履歴からどのくらい修正したのか一目瞭然なわけです。

これで、一番気になっていた変なバグは倒せたので、あとは細かい修正をいくつかしていきます。

細かい修正（バグつぶし）いろいろ。見た目とか。

ざくざく直していきましょうー☆
何をしたかはGitHubのコメントをみてね♪

putString関数の作成

画面に文字を書くところでちょっと困ったので、前回から悩んでいた問題

tft.setTextColor(TFT_WHITE);          //sets the text colour //これを入れると変になる。
//tft.setTextBackgroundColor(TFT_BLACK);          // これがない・・・
tft.setTextSize(1);                   //sets the size of text　（Charの2相当）Stringにのみかかる？

tft.setTextSize や setTextColorで設定したテキストが対応するのは tft.drawString のみで、この tft.drawString では色指定ができない。さらに、背景色の指定をすることができなくて、重なって表示されてしまう。（そして、drawCharとはテキストの指定サイズが違う！？）

という件に無理やり対応。ないなら自分でつくっちゃおうということで、putString関数というのを作りました。

// 背景色（塗りつぶし）付きのテキスト表示ルーチン
void putString(String str, int32_t poX, int32_t poY,uint32_t t_color, uint32_t bg, uint8_t textSize,int tWidth){

   // tft.setTextBackgroundColor(TFT_BLACK);          // これがない・・・
   //↑これの変わりを tft.drawCharを使っておこなう
   
   // Length (with one extra character for the null terminator)
   int str_len = str.length() + 1; 
   
   // Prepare the character array (the buffer) 
   char char_array[str_len];
   
   // Copy it over 
   str.toCharArray(char_array, str_len);
   
   //String loop
   for(int i=0;i<str_len;i++){
     tft.drawChar( poX + (i * tWidth), poY, char_array[i],t_color, bg, textSize);
   }
}

こんなかんじねー。かなり無理やりだけれどｗ

これで drawStringを一掃して、書き直したのがこれ。

画面の見た目がちょっとかわります。

こんな「普通出来ていそうなところ」がまだ未完成で、自分で作らなくちゃいけないってところがなんとも未開の地感があってわくわくしますね！（そう？ｗ）

こうやって作った部品は自分ライブラリ化して他のプログラムでも再利用できるようにしておくと良いですねー♪

早速再利用して、さらにそれっぽい表示ルーチンをつくっちゃいました。

応用：putRoundRect（）

// カド丸長方形つきテキスト表示
void putRoundRect(String str,int32_t x, int32_t y,  uint32_t t_color, uint32_t bg, uint8_t textSize,int tWidth,   int32_t r, uint32_t rColor){

   int32_t w = tWidth * (str.length() + 1) + (r * 2);
   int32_t h = (r * 2) + tWidth;

   tft.fillRoundRect(x - tWidth, y - tWidth + (r/2), w,  h, r,  bg);

   tft.drawRoundRect( x - tWidth, y - tWidth + (r/2),  w, h, r, rColor);

   putString( str, x, y ,t_color,  bg, textSize, tWidth);
}

drawRoundRect()＝カド丸の長方形表示を利用して文字列を囲んで出す奴。（なんでdrawRoundRectなんて関数が用意されているのにテキストの背景セットとかないのか謎ですががが＞＜）

さっそく使ってみると

うんうん、いいかんじですね♪

ゲーム性についてはまた次回！

今回はなんだか見た目を整えるのに時間かかってしまいました＞＜

それもゲーム性の一部だとはおもうですが、やっぱり面白さの根源はまた別のところにありあそう。

と、いうわけで、まだやりたいことがいくつか残っているのですが、それについては次回にまわしまーす☆

---

つづきかきましたー☆

#WioTerminal #ゲーム制作 #レトロゲーム #作ってみた #らせん工房

よろしければサポートお願いします！いただいたサポートはクリエイターとしての活動費にさせていただきます！感謝！,,Ծ‸Ծ,,