mieki256's diary

LEDデスクライトでもよいのではないかと物色してみたけれど、1000lm より大きい値の製品はほとんど存在しなくて…。机の上に置いて使うことを前提にしているからそこまで明るいのは要らんやろ、ということだろうけど、蛍光灯代わりに使いたい場合は条件を満たせない。更に、LED部分と器具部分が一体になった設計ばかりなので、どこかが壊れたらLEDも器具も全部含めて廃棄・新規購入することになる。それはちょっと…なんだかもったいない…。

LEDキッチンライトの類も探してみたけど、どれも暗そうで…。LEDデスクライトより、ルーメン値が小さい…。

余談。コンセントとシーリング(?)を変換する器具は販売されている模様。それを使えば、コンセントしかない場所でもシーリングライトを導入することができそうだなと。もちろん、コンセントに変換してしまうと、シーリングのように固定はできなくなるはず。重力でコンセントが抜けてしまう。別の何かで照明器具を固定する工夫が必要になるのだろう…。

LED照明はどうして規格を作らないのだろう。いやまあ、LED電球のように、既存の照明器具に沿った規格で作ってる事例もあるけれど。しかし、LEDデスクライトの類を眺めると、どの企業も製品毎にバラバラな形状で作っていて…。過去の照明用部品に引きずられない、LEDという部品に最適化した規格が作れそうな気もするのだけどなあ。

もはや日本企業にそのあたりを期待するのは無理ということなのだろうか。だったらいっそ中国あたりで規格を作って全世界を支配(?)してくれないものか…。 *2

製品形状の制約を無くせるのがLEDのメリットではあるけれど。そろそろさすがに、似たようなスペックなら規格に沿って、みたいな作り方を考えてもいいのでは…。

プチカレンダというカレンダーソフトも気になったので 3.1.0 を試用してみたけれど。

_プチカレンダ | OsadaSoft

最新版は以前の版と違う開発環境になって、ゼロから作り直しているそうで、各種紹介記事で記載されてる様々な機能がごっそり削減されて、デザインも一切変更できなくなっていた。個人的にはどうも文字が読みづらい感じで、しかしフォント変更すらできない仕様なので、今回はアンインストール。

Windows10上で単にカレンダーを表示したいだけなら、タスクトレイ上の時間が表示されてる部分をクリックすればカレンダーが表示されるのでソレを見ればいいのだけど。

このカレンダー表示、祝日等の色を変えたり、記号をつけたりする機能はついてなくて…。一応、当日になれば、「今日は何の日」的な表示はされるけど、パッと見でどのあたりが祝日なのかを視認できないのは実に不便。また、常時表示しておくこともできないわけで…。視線を移動すればすぐに確認できるのと、一々クリックしないと見れないのでは、やっぱり違うよなあ…。

スタートメニューからカレンダーアプリを起動すれば、そちらでは祝日が表示できるのだけど…。カレンダーアプリはウインドウがでかでかと表示されるわけで…。

Windows10のソレは、どうも色々と気が利かないというか…。やはり上から言われてしぶしぶ実装してるのだろうか…。作ってる人達も便利・快適に使っているのだろうなあ、てな感じがほとんどしないのだよなあ…。

でもまあ、大半の人は、現実世界の机の上に印刷物のカレンダーを置いてあることがほとんどなのだろうけど。なんでもかんでもPC上で済ませようと思ってしまう自分のような人種が特殊過ぎるのだ…。たぶん。

今まで100W相当のLED電球を使っていたけど、どうもここ数日、かなり目が疲れてしまうような気もしてきた。明る過ぎるのだろうか…。

試しに、以前購入して部屋の中で埃をかぶっていた60W相当の電球型蛍光灯、TOSHIBA EFA15ED//11-Z と交換してみた。680lm、11W。ちなみに、今まで使ってた100W相当LED電球、TOSHIBA LDA11D-G/100V1は、1520lm、10.8W。

一気に暗くなってしまったけど、目はそれほど疲れない…ような感じもする。

前述の効果音作成ソフトだけでは欲しい音にならないので、保存したwavを加工編集する。今回は以下のソフトをインストール。

• Audacity 2.4.2
• SoundEngine Free 5.23

_Audacity | Free, open source, cross-platform audio software for multi-track recording and editing.
_SoundEngine Free/Pro【音楽編集・音声録音フリーソフト】

Audacity には、Nyquist プラグインも追加した。

_Download Nyquist Plug-ins - Audacity Wiki
_Nyquist Generate Plugins - Audacity Wiki
_Nyquist Effect Plug-ins - Audacity Wiki

上記のページから辿って、.ny をダウンロード。一つ一つ右クリックして保存するのは面倒臭いので、Firefox 81.0.2 64bit + DownThemAll! 4.2.6 を使って、*.ny でリンクURLをフィルタリングしてダウンロードした。

インストールは、Audacity上で、道具箱 (Tools?) → Nyquist Plug-in Installer、を選んで行う。HDDに保存してある .ny ファイル群を選択してOK。Audacity のユーザフォルダ\Plug-Ins\ (Windowsの場合、C:\Users\<USERNAME>\AppData\Roaming\audacity\Plug-Ins\ 以下)に、.ny がコピーされる。

そのままだと有効になっていないので、エフェクト → プラグインの追加/削除、を選んで、「新規」になっているプラグインを選んで「有効化」。

Audacity はVSTプラグインも使えるので、VSTプラグイン(.dll) を Audacityインストールフォルダ\Plug-Ins\ 以下にコピー。Audacity 起動後、エフェクト → プラグインの追加/削除、を選んで有効化。

以前、プロジェクト上で oggをインポートした際は、自動でループが有効の状態になったけれど。今回 wavをインポートした時は、ループは無効の状態になっていた。

おそらくだけど、「ogg はBGMとして使うもの」「wav は効果音として使うもの」と判断しているのかなと。あるいは、ogg にしろ wav にしろ音の長さを見て、音が短ければたぶん効果音だろうからループ無効、音が長ければ曲だろうからループ有効、みたいな処理になってるのかもしれない。わからんけど。

何にせよ、音をループ再生させるかどうかは、ogg や wav のインポート設定で指定できるので、そこらへんをチェック。みたいな。

一応これで効果音を鳴らせたけれど、ちと疑問が。これって効果音の種類の数だけ、AudioStreamPlayer ノードをチクチクと追加することになるのだろうか…？ 例えば効果音の種類が128種類あったら、ノードが128個ほどずらりと並ぶのかな…。そんなアホな…。もっと上手い方法がありそうな気がする…。

PortableApps.com で公開されている GIMP 2.10.20-1 Portable では、この不具合は出るのだろうか…。PortableApps.com 版は32bit版 GIMP だったはず。試しにそちらもインストールしてみた。

_GIMP Portable (image editor) | PortableApps.com

件の不具合は出ない…と思ったけれど、フォルダの中を覗いてみると64bit版と32bit版の両方が入っているような…？

_GIMP Portable (Dual 32/64) 2.10.12 Test 3 - Released | PortableApps.com
_GIMP Portable 2.10.12-3 (image editor) Released | PortableApps.com

以前は32bit版のみを公開していたけれど、どうやら GIMP 2.10.12 Portable の時点で64bit版と32bit版の両方が同梱されるようになったらしい。すると今回起動しているのは64bit版なのだろうか…？ 64bit版では件の不具合は出ないのだけど…。32bit版と64bit版のどちらが動いているかを判断するには、どこを見ればいいのやら…。

余談。前述のフォーラム記事内で、GIMPの総ファイルサイズが2GBぐらいになってる、みたいな話が出ていたけれど、HDD内のGIMPインストールフォルダを測って(?)みたら、たしかに2GBぐらいのファイルサイズになっているなと…。いやはや、デカ過ぎ…。64bit版と32bit版の両方が入ってるから仕方ないのかもしれないけれど。

それでも PortableApps版は、共有できるところは共有して、1GB前後まで少なくしてあるようで。

そんな感じで、Pyxel と TIC-80 のGIMPパレットファイル(.gpl)を作成できたので置いときます。ついでに、古いパレットデータ(+α) も。

_Pyxel_new.gpl
_tic80_sweetie-16.gpl
_PICO-8_Pyxel_old.gpl
_db16_tic80.gpl

PICO-8 って何？ Fantasy Console の一つ。以前の Pyxel は、PICO-8 のパレットデータと同じ値を使っていた模様。

DB16、DB32って何？ DawnBringerさんが作った、16色、32色パレットだそうで。以前の TIC-80 は DB16 を利用していた模様。

_Pixel Joint Forum: DB32 - DawnBringer's 32 Col Palette V1.0
_Pixel Joint Forum: DB16 - DawnBringer's 16 Col Palette v1.0

ついでに、シェアウェアのドットエディタ、EDGE2 1.16 dev 011 用のパレットデータファイル(.pal)も作成してみたので置いときます。無料版のEDGEでは使えないので注意。

_edge2_palette.zip

解凍して、中に入ってる .pal を、EDGE2インストールフォルダ\System\Palette\ に入れておいて、カラーパレットウインドウ → ファイル → 登録パレット → 編集、で、「追加」をすれば、各パレットファイルを追加登録できるはず。

と、ここまで書いてから気づいたけれど。

• EDGE2 1.16 dev011 のパレットウインドウでは、カンマ区切りのcsv、タブ区切りテキストファイルを開ける。
• EDGE 1.29b のパレットウインドウでは、カンマ区切りのtxtを読み込むことができる。

カンマ区切りの .txt か .csv を用意しておけばパレット値をインポートできたのだな…。一応置いておきます。

_pyxel_new.csv
_tic80_new_pal_sweetie-16.csv

まずはプロジェクトを新規作成。Godot Engine を起動するとプロジェクトマネージャーが開くので「新規プロジェクト」をクリック。



プロジェクト名と、プロジェクトの保存場所を指定。レンダラーは、OpenGL ES 3.0 と OpenGL ES 2.0 のどちらかを選べるけれど、Webブラウザ上でも動作するゲームを作ってみたいので、OpenGL ES 2.0 のほうを選ぶ。



プロジェクトが新規作成された。Godot のウインドウが開く。

プロジェクトのゲームウインドウサイズを設定しておく。

プロジェクト → プロジェクト設定、を選択。



Display の中の Window を選択して、Width と Height を指定。今回は 1280 x 720 のウインドウサイズを指定しておくことにした。数値を入力したら「閉じる」をクリックして設定を終える。

プロジェクトに、テクスチャ画像をインポートする。

今回は、以下の画像を使うことにする。複数キャラが1枚の画像に収められている、スプライトシートと呼ばれる画像。1キャラは96x96ドット。

_newtototone_image_24bit.png

ところで、プロジェクトフォルダ直下に雑多なファイルを置くとファイル管理がごちゃごちゃしてしまうので、画像ファイルやサウンドファイルは resources というフォルダの中に入れておきたい。imports でも images でも名前は何でもいいけど。

プロジェクトフォルダ内でフォルダを新規作成する。ファイルシステムウインドウ内の「res://」を右クリック。「新規フォルダ」を選択。



新規フォルダ名を入力。「resources」と打ち込む。



res:// の下に、resources というフォルダが作成された。エクスプローラ等から使いたいテクスチャ画像を resources の上までドラッグアンドドロップ。これでresourcesフォルダの中にテクスチャ画像がコピーされて、Godot Engine が自動でインポート処理をしてくれる。



注意点。Godot Engine上で2Dゲームを作る場合はテクスチャ画像の Filter と Mipmaps を無効にしておきたい。そうしておかないと、表示した時に画像の境界がちょっとおかしな見た目になってしまうので…。

画像ファイルを選択してから、上のほうの「インポート」タブをクリック。デフォルトでは「Filter」にチェックが入っているので、クリックしてチェックを外す。ついでに、Mipmaps のチェックも外れてることを確認。チェックを外したら「再インポート」をクリック。



これで、Godot Engine のプロジェクトからテクスチャ画像を利用できる状態になった。

プレイヤーキャラ相当をゲームウインドウに表示したい。

プレイヤーキャラは、画像表示をするし、アタリ範囲も持つので、今回は Area2D というノードを作って処理する。

 Player (Area2D)
  │
  ├─ Sprite (画像表示を担当するノード) 
  │
  └─ CollisionShape2D (アタリ範囲を担当するノード)

ちなみに、アタリ判定を必要とするノードは、Area2D、StaticBody2D、RigidBody2D、KinematicBody2D の4種類がある。詳しくは以下を参考に。

_物理の紹介 - Godot Engine (stable)の日本語のドキュメント

一番上位となる Area2Dノードをシーンに追加していく。「シーン」タブをクリックすると、ウインドウの左上のほうに「何のノードを追加するか？」的なノリで4つほどノードの選択肢が出ているので、「その他のノード」をクリック。



ノード新規作成ウインドウが開くので、「area2d」と打ち込んで絞り込み検索。リストアップされた中から「Area2D」を選んで「作成」をクリック。



Area2Dノードが一番上位のノード(ルートノード？)としてシーンに追加された。



ノードの名前を「Player」に変更しておく。右クリックして「名前の変更」。



「Player」を入力。これでノード名が「Player」になった。



ちなみに、ノードが選択されてる状態でノード名部分をクリックしても名前の変更はできる。

Playerノードに、画像表示をする Spriteノードと、アタリ範囲を指定する CollisionShape2Dノードを追加したい。

Playerノードを選択した状態で、左上のプラスマークをクリックしてノードを追加していく。



「sprite」と打って絞り込み検索。「Sprite」を選んで「作成」。



Spriteノードが追加された。



Playerノード(一番上のノード)を選択してから、またプラスアイコンをクリック。



CollisionShape2Dノードを選択して作成。



CollisionShape2Dノードが追加された。

画像表示を担当するSpriteノードにテクスチャ画像を指定する。

Spriteノードを選択。



ウインドウの右側に、Spriteノードのプロパティ一覧が表示されているので、ファイル一覧からテクスチャ画像を、「Texture」の欄までドラッグアンドドロップ。



画像が表示された。しかし、スプライトシート画像の全体が表示されてしまっている。この中の一部分だけを表示するように指定したい。



Spriteのプロパティの、Vframes、Hframes、Frameを変更して、スプライトシート内の1つだけを表示するように設定する。

• Vframes : 縦に何個キャラが並んでるか。
• Hframes : 横に何個キャラが並んでるか。
• Frame : 何番目のキャラを表示するか。

これで、プレイヤーキャラ部分だけが表示される状態になった。

念のためにメモしておくけど…。

• キャンバスのスクロールは、マウスのホイールボタン(中ボタン)ドラッグ。
• キャンバスのズームは、マウスホイール回転。
• 等倍表示(100%表示)は、Ctrl + 0 キー。

今後のことを考えて、プレイヤーキャラの基準点を足元にしておきたい。Sprite と CollisionShape2D の位置をちょっとずらすことにする。

Spriteノードを選択。



Sprite の Transform → Position → y を、-48 に変更。Sprite の表示位置が変更されて、(0,0) がプレイヤーキャラの足元にあるような感じになった。



アタリ範囲も設定しておく。まずはアタリの形を指定しないといけない。CollisionShape2D を選択して、プロパティの Shape をクリック。設定できる種類がリストアップされるので、円の大きさでアタリ範囲を指定できる CircleShape2D を選ぶ。。



小さい赤丸をドラッグして、円の大きさを変更。



Transform → Position → y を -48 にする。



これで、足元を基準点にしつつ、アタリ範囲も設定できた。

作業中に、せっかく設定した子ノードの位置をうっかり変えてしまわないようにしたい。

Playerノードを選択して、ツールバー上の「オブジェクトの子を選択不可にする」をクリック。これで、子ノードの位置を間違って変えてしまう状態を防げる。

プレイヤーキャラの表示位置を、ウインドウの下のあたりに変更しておきたい。

Playerノードを選択して、Transform → Position → x,y に、640, 672 を指定。これで、ウインドウの下のあたりにプレイヤーキャラが表示される状態になった。

プレイヤーのシーンを保存する。シーン → 名前を付けてシーンを保存。



プロジェクト内に「assets」というフォルダを新規作成して、各シーンはその中に入れていくことにする。「フォルダを作成」をクリック。



「assets」と入力。



Player.tscn として保存。



assetsフォルダの中に、Player.tscn が保存された。

ゲームウインドウを表示して確認してみる。

右上のほうに再生ボタンっぽいのがあるので、「シーンを実行」をクリック。あるいは、F6キーでも実行できる。



ゲームウインドウが表示されて、プレイヤーキャラも表示された。



これでひとまずプレイヤーキャラの画像を表示するところまではできた。

ちょっと記事が長くなってきたので、プレイヤーキャラをキー入力で動かす処理と、プレイヤーキャラのアニメーションは別記事に分けよう…。

プレイヤーキャラをキー入力で左右に動かしたいのだけど、そのためには若干のスクリプトを書かないといけない。

まずはスクリプトファイルを作成する。Playerノードを選択して、ちょっと右上のほうにある、スクリプトをアタッチするボタンをクリック。



ノードにスクリプトをアタッチするウインドウが開くけれど、今後のことも考えて、スクリプトファイルは「scripts」というフォルダの中にまとめて入れておきたい。「パス」の右端のパス参照ボタンをクリック。



scriptsフォルダを新規作成。



scriptsフォルダ内で、Player.gd というファイル名を指定。デフォルトでは「(ノード名).gd」がファイル名の入力欄に入っているので、今回ファイル名は打ち込み直さなくていいはず。



「作成」をクリック。これでスクリプトファイルが作成・保存される。



Playerノードにスクリプトが割り当てられた。ノード名の横にファイルっぽいアイコンが表示されて、スクリプトが割り当てられていることを示している。また、スクリプトを記述するためのエディタ画面も表示された。



スクリプトを書く。



スクリプトの内容は以下。

_Player.gd

extends Area2D

export var speed = 600
export var w = 96
var screen_size

func _ready():
    screen_size = get_viewport_rect().size

func _process(delta):
    var velocity = Vector2()
    if Input.is_action_pressed("ui_right"):
        velocity.x += 1
        $Sprite.flip_h = true
    if Input.is_action_pressed("ui_left"):
        velocity.x -= 1
        $Sprite.flip_h = false
    
    if velocity.length() > 0:
        velocity = velocity.normalized() * speed
    
    position += velocity * delta
    position.x = clamp(position.x, w/2,  screen_size.x - (w/2))

このスクリプトがやってることは…。

• 「var 変数名」で変数を用意できる。
• 「export var 変数名」で、GUIから値を変更できる変数を用意できる。
• 変数として、以下の3つを ―― 速度の大きさを指定する speed、画像の横幅を示す w、ゲームウインドウサイズを覚えておく screen_size を用意する。
• ノードが発生すると、_ready() が呼ばれるので、そこに初期化処理を書く。ここでは、ビューポート(ゲームウインドウ？)の大きさを取得してる。screen_size.x に画面横幅が、screen_size.y に画面縦幅が入る。
• _process(delta) は、一定の時間間隔で呼ばれる処理を書く。
• delta は、_process(delta) が前回呼ばれてから今回呼ばれるまでの時間(単位は秒？)が入っている。例えば、もし60FPSで動いているなら、1秒 / 60 = 0.0166前後の値が入ってくるはず。
• キー入力で速度を決定。座標(Position)に速度を加算して変更。
• clamp() を使って、キャラのx座標が画面の左端と右端を超えないように補正。

Ctrl + S キーを押してスクリプトを上書き保存してから、F6キーを押して実行してみる。カーソルキーの左右を押すと、プレイヤーキャラが左右に動いてくれた。



少し補足。スクリプト中で、$Sprite.flip_h を弄ってるけど、これは Sprite の左右反転表示フラグ。右キーを押したら向かって右向きに、左キーを押したら向かって左向きになるように指定している。

プレイヤーキャラに、2枚の画像をパタパタと切り替えるだけの簡単なアニメーションをつけたい。

Godot Engine は、各ノードに AnimationPlayer というノードを追加するとアニメをつけることができる。

Playerノードを選択して、ノードを追加。「anima」まで打って絞り込み検索。「AnimationPlayer」を選択して「作成」。



AnimationPlayerノードが追加された。AnimationPlayer ノードを選択すると、画面の下のほうにアニメーション設定用のウインドウが表示される。「アニメーション」をクリック。



アニメの種類を新規作成する。「新規」をクリック。



待ちアニメーションとして、「idle」というアニメ種類を作る。「idle」と打って「OK」。



「idle」用のアニメーショントラックを追加していける状態になった。



今回は、Spriteノードで表示している Frame を変化させることでパタパタアニメを作りたい。Spriteノードを選択して、Frame値を2にする。その右側にある鍵っぽいボタンをクリックすることで、アニメーション用のトラックにその値を登録する。



「トラックを作っていいか？」と尋ねてくるので「作成」。



0秒目のところに、Sprite の Frame値が登録された。



0.5秒目のあたりをマウスクリックして指定する。時間軸の横幅が狭過ぎて指定しづらい場合は、右下のスライドバー(?)で時間軸の幅を変更できる。



Sprite の Frame値を3に変更して、右側の鍵ボタンをクリック。これで、0.5秒目のところにも、Sprite の frame値を登録できた。



アニメをループ再生したいので、右端のほうにあるループ再生アイコンをクリックして設定。また、このノードが発生した時から idleアニメを再生したいので、少し上のほうにある自動再生？アイコンもクリックして設定。



再生ボタンっぽいボタンをクリックすると、アニメを再生して確認することができる。




これで、Frame値が 2 → 3 → 2 → 3…と変わり続けるアニメ種類を作ることができた。

同じ要領で、歩いてる時のアニメ種類、「walk」を新規作成する。

• Frame値は 6 と 7 で切り替わるように指定。
• 「idle」は再生時間が1秒だったけど、「walk」は再生時間を 0.2秒にしたいので、再生時間の入力欄を、1 から 0.2 に変更。
• ループ再生も有効にしておく。

更に同じ要領で、プレイヤーがダメージを受けた時のアニメ種類、「dead」を新規作成する。

• 再生時間は 0.4秒。
• Sprite の Frame値は4のみの1種類。
• Sprite の Flip H を変更して、左→右→左→右、とアニメさせる。

アニメの種類を用意できたので、スクリプトからアニメを再生するように指定していく。

Playerノードの横にあるスクリプトファイルアイコンをクリックして、スクリプトの編集画面を開く。


スクリプトの内容は以下。

_Player.gd

extends Area2D

export var speed = 600
export var w = 96
var screen_size

func _ready():
    screen_size = get_viewport_rect().size
    $AnimationPlayer.play("idle")

func _process(delta):
    var velocity = Vector2()
    if Input.is_action_pressed("ui_right"):
        velocity.x += 1
        $Sprite.flip_h = true
    if Input.is_action_pressed("ui_left"):
        velocity.x -= 1
        $Sprite.flip_h = false
        
    if velocity.length() > 0:
        velocity = velocity.normalized() * speed
        $AnimationPlayer.play("walk")
    else:
        $AnimationPlayer.play("idle")
        
    position += velocity * delta
    position.x = clamp(position.x, w/2,  screen_size.x - (w/2))

前回のスクリプトに対して以下の変更をした。

• _ready() の中に、$AnimationPlayer.play("idle") を追加。
• 速度がある時は、$AnimationPlayer.play("walk") を呼ぶ。
• 速度が0の時は、$AnimationPlayer.play("idle") を呼ぶ。

F6キーを押して実行。



これで、プレイヤーキャラがアニメをしながら動くようになった。

林檎キャラ用のシーンを新規作成する。シーン → 新規シーン、を選択。

ルートノード(一番上位のノード)として、RigidBody2Dノードを使うことにする。

プレイヤーキャラは Area2Dノードを、林檎キャラは RigidBody2Dノードを使うけれど、それぞれ以下のようなノードらしい。

• Area2D は物理法則に関係なく動くオブジェクトに使う。
• RigidBody2D は物理法則に基づいて動くオブジェクトに使う。

林檎キャラは重力で上から下に落ちていくオブジェクトなので、これは物理法則に基づいて動くオブジェクトのように思える。よって、RigidBody2D を使ってみる。

「その他のノード」を選択。



「rigi」と打ち込んで絞り込み検索。「RigidBody2D」を選んで「作成」。



これで、ルートノードとして RigidBody2D を追加できた。

子ノードとして、画像表示を担当する Spriteノード、アタリ範囲を持つ CollisionShape2Dノードを追加していく。

ルートノード(RigidBody2D)を選択して、左上のプラスマークをクリック。



Spriteノードを作成。



ルートノードを選択し直して、再度ノードを追加。CollisionShape2Dノードを作成。



ルートノードの下に、Spriteノード、CollisionShape2Dノードが登録されてる状態になった。



念のために書いておくけれど、各ノードはドラッグアンドドロップで階層の位置を変更することができる。もし、各ノードの場所を間違って作成してしまった場合は、ドラッグアンドドロップで変えてやればOK。

ノード名を変更しておく。RigidBody2Dノードが選択されてる状態で、ノード名部分をクリックすれば名前を変更できる。「Apple」に変更。

Spriteノードにテクスチャ画像を指定する。Spriteを選択。



Textureプロパティが「空」になっているのでクリック。「読込み」を選択。



テクスチャ画像(スプライトシート画像)を選択する。



スプライトシート画像の全体が表示された。



Animation の Vframes、Hframes、Frame を変更して、林檎のキャラが表示される状態にする。

• Vframes : 2
• Hframes : 4
• Frame : 0

アタリ範囲を設定する。CollisionShape2D を選択。



Shape が「空」になっているのでクリック。円の形でアタリ範囲を設定できる CircleShape2D を選択。



小さい赤い丸をドラッグして、円の半径を設定。



これでアタリ範囲も設定できた。

重力のパラメータを変更する。Appleノード(RigidBody2Dノード)を選択。



このプロパティ・値で合っているのか分からないけど…。Gravity Scale を 9.8 に変更。

シーンを保存する。シーン → 名前を付けてシーンを保存、を選択。



assets フォルダの中に、Apple.tscn としてシーンを保存する。



保存された。

右上の再生ボタンをクリックするか、あるいは F6キーを押して実行してみる。



林檎が上から下へと重力に引かれて(?)落ちていった。


一見すると上手く動いてる感じなのだけど、この段階ではまだ問題がある…。この林檎キャラは、画面の下まで消えていった後も永遠に存在し続けて、どこまでも落ちていってる。なので、画面の下まで落ちていったら自分自身を消すような処理を追加してやらないといけない。その処理はスクリプトで記述する。

Appleノードに、スクリプトをアタッチする。Apple を選択してから、少し右上のスクリプトアタッチボタン(?)をクリック。



scriptsフォルダの中に、Apple.gd として、スクリプトファイルを作成する。





スクリプトを記述するためのエディタ画面が開いた。スクリプトを記述。


スクリプト内容は以下。

_Apple.gd

extends RigidBody2D

export var kind = "Apple"
export var h = 96
var screen_size

func _ready():
    screen_size = get_viewport_rect().size

#func _process(delta):
#   pass

func _physics_process(delta):
    if position.y > screen_size.y + h:
        queue_free()

やっていることは…。

• ノード発生時に呼ばれる _ready() の中でビューポートサイズ(ゲームウインドウサイズ)を取得して記憶。
• 一定間隔で呼ばれる _physics_process(delta) の中で、自分の y座標が画面最下部の座標を超えたら、自分自身を消去するようにする。
• 自分自身を消去したい時は、queue_free() を呼ぶ。

プレイヤーキャラ(Area2Dノード)を作った時は、_process(delta) の中で処理を書いたけど。今回は _physics_process(delta) の中で処理を書いている。物理法則に基づいて動くオブジェクトの場合は、_process(delta) ではなくて、_physics_process(delta) の中に処理を書くこと、と決まっているらしい。

さておき、これで林檎キャラは画面最下部を超えると自分自身を消去するようになった。

林檎キャラを作成した時と同様の手順で、爆弾キャラのシーンも作成する。



_Bomb.gd

extends RigidBody2D

export var kind = "bomb"
export var h = 96
var screen_size

func _ready():
    screen_size = get_viewport_rect().size

#func _process(delta):
#   pass

func _physics_process(delta):
    if position.y > screen_size.y + h:
        queue_free()

Apple との違いは…。

• ルートノード名が Bomb。
• シーン名が Bomb.tscn。
• Sprite の Frame値が、爆弾の絵を指す「1」になってる。
• スクリプト内では export var kind = "bomb" になってる。

F6キーを押して実行すれば、林檎キャラと同じように、爆弾も上から下へと落ちていく。

林檎も爆弾もほとんど同じ処理なので、本来は共通で使えるシーンを作ってどうにかするべきなのかもしれないけれど、まだそのあたり、どんな感じに作業すればいいのか分かってない…。

何にせよ、これで上から下へと落ちていく林檎と爆弾を作れた。次回はこの2つをゲームウインドウ内で大量発生させる予定。

以下のようなノード構成でシーンを作成。

Node2D
  │
  ├─ Node2D
  │
  ├─ Timer
  │
  └─ Timer

各ノードの名前を分かりやすく変更しておく。

ItemGenerator (Node2D)
  │
  ├─ Items (Node2D)
  │
  ├─ ItemTimer (Timer)
  │
  └─ RateTimer (Timer)

• Items : 発生させた林檎や爆弾を追加していくノード。
• ItemTimer : 林檎や爆弾の発生間隔を担当するノード。
• RateTimer : 爆弾が混じる確率を変化させるノード。

Timer は、指定時間毎に「時間だよ」とシグナル(Signal、信号)を出してくれるノード。Signal と何かのメソッドを接続しておくことで、指定時間毎に何かの処理をする、ということができるようになる。

ItemTimer の時間設定を変更。Wait Time を 0.2秒に。Autostart も有効に。



RateTimer の時間設定を変更。Wait Time を 1秒に。Autostart も有効に。

ItemGenerator にスクリプトをアタッチする。



スクリプト、ItemGenerator.gd を記述。


内容は以下。

_ItemGenerator.gd

extends Node2D

export (PackedScene) var Apple
export (PackedScene) var Bomb
export var w = 96
var rnd = RandomNumberGenerator.new()
var screen_size
var born_rate = 100
var born_enable = false

func _ready():
    rnd.randomize()
    screen_size = get_viewport_rect().size
    born_rate = 100
    born_enable = false
    
    start()  # Delete in production environment

func start():
    born_enable = true
    born_rate = 100

func stop():
    born_enable = false

func generate_item():
    if born_enable:
        var x0 = w / 2
        var x1 = screen_size.x - (w / 2)
        var x = rnd.randi_range(x0, x1)
        var item
        if rnd.randi_range(0, 100) > max(20, born_rate):
            item = Bomb.instance()
        else:
            item = Apple.instance()
        item.position.x = x
        item.position.y = -w
        $Items.add_child(item)
    
func update_rate():
    if born_enable:
        born_rate -= 3
        if born_rate <= 1:
            born_rate = 100

• export (PackedScene) var Apple : 林檎キャラのシーンを記憶する変数。
• export (PackedScene) var Bomb : 爆弾キャラのシーンを記憶する変数。

• _ready(): 初期化処理。
• start() : 発生処理開始。実行フラグを立てる。
• stop() : 発生処理停止。実行フラグを下す。
• generate_item() : 林檎か爆弾を発生させる処理。ランダムなx座標位置で、Items に登録していく。
• update_rate(): 爆弾が混ざってくる確率を変化させる。

• vat item = Apple.instance() で、Apple のインスタンスが得られる。
• add_child(item) で、item を自分の子ノードとして追加できる。
• $Items.add_child(item) なら、自分の子ノードの Items に、item を子ノードとして追加する。

• export var xxxx と書いておけば、GUIで変数の値を設定できるようになる。
• export (PackedScene) var xxxx なら、シーンを記憶できる変数になる。

今回は、林檎のシーン Apple.tscn と 爆弾のシーン Bomb.tscn をドラッグアンドドロップで設定しておく。



変数 Apple と、変数 Bomb に、Apple.tscn、Bomb.tscn が登録(?)された。これでスクリプト内から Apple と Bomb を使える状態になった。

Godot Engine の各ノードは、何かの条件を満たした時に「xxxになったよ」的お知らせとして「シグナル(Signal、信号)」を発行する。例えば、Timerノードは設定された時間が経過すると timeout() シグナルを発行する。timeout() シグナルと何かのメソッドを接続しておけば、設定時間毎に何かの処理が実行される状態を作れる。

今回は、以下のシグナルとメソッドを接続する。

• ItemTimer の timeout() → ItemGenerator.gd 内の generate_item()。林檎か爆弾の発生処理メソッド。
• RateTimer の timeout() → ItemGenerator.gd 内の update_rate()。爆弾が発生する確率を変化させるメソッド。

ItemTimer を設定。ItemTimer を選んでから、ノードタブに切り替えて、timeout() を選んで「接続」。



「メソッドにシグナルを接続」ウインドウが表示される。



ItemGenerator を選んで、受信側メソッドに「generate_item」を入力して「接続」。「()」は打ち込まなくていい。



メソッドとシグナルが接続されると、スクリプトのエディタ画面で、メソッド名の左側に「シグナルが接続されてるよ」と示す緑のアイコンが表示される。



RateTimer を設定。RateTimer を選んでから、ノードタブに切り替えて、timeout() を選んで「接続」。



ItemGenerator を選んで、受信側メソッドに「update_rate」を入力して「接続」。



スクリプトのエディタ画面で、update_rate() の左側にも「シグナルが接続されてるよ」アイコンが表示された。



ItemGeneratorノードを選択してからF6キーを押して実行してみる。次々に林檎や爆弾が発生してくれた。


しばらく動かし続けると爆弾の出現頻度が高くなって、ある時間を超えるとまた林檎だけ出てくる状態になる。それらしく動いてくれた。

今の状態では林檎と爆弾の発生間隔が長いので見た感じそれほどおかしくはないけれど…。例えば、ItemTimer の Wait Time を小さくすると林檎と爆弾の発生数が増えて、ところどころの林檎や爆弾が回転してる感じになる。これは林檎や爆弾同士がぶつかり合ってその際に回転してしまうから。

林檎や爆弾はプレイヤーキャラとぶつかればいいのであって、林檎や爆弾同士でぶつかる必要は無い。そこで、林檎キャラや爆弾キャラの Collision 設定を変更して、林檎や爆弾同士では衝突判定をしない・アタリを取らないようにする。

Apple.tscn を開いて、Collision → Mask を全てオフにする。デフォルトでは一番左だけチェックが入っているはず。



Bomb.tscn も開いて、Collision → Mask を全てオフにする。



これで、林檎や爆弾同士では衝突判定をしない状態になった。

プレイヤーキャラと林檎・爆弾の大量発生まで作れたので、次回はゲームのメインシーンを作ってそれぞれ合体させてみたい。

新規シーンを作って、ルートノードを作成する。

Godot Engine で2Dゲームを作る場合、「メインシーンのルートノードには Node を使え」という話をどこかで見かけた記憶があるのでソレに従う。

「その他のノード」を選択。



「Node」を選んで「作成」。



ルートノードとして Node が追加された。



分かりやすくするために、ノード名を「Main」に変更。

子ノードとして、プレイヤーキャラのシーンと、林檎や爆弾の発生シーンを追加する。

「シーンファイルをノードとしてインスタンスにします」ボタンをクリック。プラスマークの右にあるボタン。



子にするシーンを選ぶ。プレイヤーキャラのシーン、assets/Player.tscn を選択して「開く」。



同様に、林檎や爆弾の発生シーン、assets/ItemGenerator.tscn も選択して「開く」。



Mainノードの下に、Player と ItemGenerator がぶら下がっている構成にした。

シーンを保存。シーン → 名前を付けてシーンを保存、を選択。



Mainシーンは、res:// の直下に保存してしまっていい。メインシーンなので。

F6キーを押して実行してみる。


プレイヤーキャラが表示されて、林檎や爆弾も落ちてくる状態になった。ゲームっぽい画面になってきた。

前述の画面は一見するとゲームっぽい画面だけど、プレイヤー、林檎、爆弾は衝突判定の類をまだ何もしていないので、これでは全然ゲームになってない。そのあたりの処理を追加していく。

プレイヤーキャラは、アタリ範囲を持てるArea2Dノードを使っているけれど。Area2Dノードは、自分のアタリ範囲にRigidBody2D が入ってきた時に、「何かが自分に当たったよ」と教えてくれる、body_entered(body) シグナルを発行することができる。

つまり、Playerノードが持ってるシグナル、body_entered にメソッドを接続してやれば、「プレイヤーに林檎か爆弾が当たった時にメソッドを呼んで何か処理をする」という状態を作れる。

Playerノードを選択して、ノードタブを選択。body_entered(body:Node) を選んで、「接続」。



「メソッドにシグナルを接続」ウインドウが開くので、「Player」を選択して「接続」。受信側メソッド名はそのままでいい。



プレイヤーキャラのスクリプト、Player.gd の最後に、メソッド _on_Player_body_entered(body) が追加された。


このメソッドの中に、林檎や爆弾と当たった時の処理を書けばいい。

スクリプトを書く。


追加する内容は以下。

_Player.gd

func _on_Player_body_entered(body):
    if body.kind == "Apple":
        print("Apple")
        body.queue_free()  # kill Apple
    else:
        print("bomb")

body には、林檎か爆弾のどちらかのインスタンスが入ってくるので、それが林檎なのか爆弾なのかを判別しないといけないけれど…。

以前、林檎や爆弾のスクリプトを書いた際に、以下を記述してあるので…。

export var kind = "Apple"

export var kind = "bomb"

body.kind に "Apple" が入ってるのか、それとも "bomb" が入ってるのかを調べれば、林檎か爆弾なのかを判別できる。 *1

print("hoge") で、Godot Engine エディタ画面の出力ウインドウにメッセージを出力することができる。

また、林檎と衝突した場合、その林檎はもう不要なので、body.queue_free() を呼んで林檎を消去してやる。

衝突判定処理を書けたので、F6キーを押して実行してみる。


プレイヤーが林檎か爆弾と衝突するたびに、出力ウインドウにどちらに当たったかが出力された。ちゃんと衝突判定が動いている。後はこのメソッドの中で、林檎を取った時の処理や、爆弾に当たった時の処理を書いていけばいい。

今回作った Main.tscn を、このプロジェクトのメインシーンとして設定しておく。ファイル一覧ウインドウ内で、Main.tscn を右クリック。「メインシーンとして設定」を選ぶ。


これで、Godot Enigne を起動してプロジェクトを開いたときに、Main.tscn が開かれた状態になる。

さて、林檎や爆弾と当たる状態にはなったけど、当たった時に何かアクションが欲しい。例えば林檎をキャッチした時はスコアが増えてほしい…。次回はスコア表示等を担当するシーンを作りたい。

HUDシーンを新規作成。シーン → 新規シーンを選択。



Godot Engine は、スコアやタイトルなどを画面に表示する場合、CanvasLayerノードを使うことになっているらしい。「その他のノード」を選択。



「CanvasLayer」を選んで「作成」。



CanvasLayerノードがルートノードとして追加された。左上のプラスマークをクリックして子ノードを追加していく。



文字列表示を担当する Labelノードを2つ、ボタンを担当する Buttonノードを1つを、CanvasLayerの子ノードとして追加した。



分かりやすいように名前を変更しておく。

Hud (CanvasLayer)
    │
    ├─ Message (Label) : ゲームタイトルや「GAME OVER」の表示に使う。
    │
    ├─ Score (Label) : スコア表示を担当。
    │
    └─ StartButton (Button) : スタートボタンを担当。

シーンを保存。シーン → 名前を付けてシーンを保存、を選択。



res://assets/ の下に、Hud.tscn として保存する。

Messageノードにゲームタイトル名を表示させる。Messageノードを選択。



Textプロパティに、今回のゲームタイトル「NEWTOTOTONE」を入力。また、Align と Valign を Center にしておく。これで文字列が中央揃えで表示される。

「レイアウト」をクリックして「中央水平伸長」を選択。ある程度位置合わせをしてくれる。



小さい赤丸をドラッグして縦幅を調整。

これで表示文字列の指定とレイアウトはできたけど、文字が小さい。これでは読めない…。

ちゃんとした表示にするためには、フォントファイルが必要になる。Godot Engine はフォントファイルとして ttfファイルやotfファイルが使えるので、入手してインポートすればいい。

しかし、一般的にフォントファイルはライセンスが指定されていて、ものによってはゲームに同梱することが許されてなかったりする。

ここは比較的自由に使えるラインセンスのフォントを入手しないといけないわけだけど…。ありがたいことに、ドットコロンさんがいくつかのフォントファイルをCC0ライセンスで公開してくれているので、感謝しつつ使わせてもらうことにする。マジ助かります…。ありがたや…。

_ドットコロン
_Aileron | ドットコロン
_CC0について ― “いかなる権利も保有しない” | クリエイティブ・コモンズ・ジャパン
_CC0の日本語版が公開されました | 著作権のネタ帳

今回は Aileronフォントを使わせてもらうことにした。ダウンロードして解凍すると、中に otfファイルが入ってるので、今回は以下の2つを利用。

• Aileron-Black.otf
• Aileron-Bold.otf

エクスプローラ等からフォントファイルをGodot Engineのエディタ画面にドラッグアンドドロップ。これでフォントファイルがプロジェクトフォルダ内にコピーされる。



res://直下にコピーされてしまった。ドラッグして resourcesフォルダ内に移動。



resourcesフォルダ内に入った。

インポートしたフォントを利用する。Messageノードの Custom Fontsプロパティをクリックして、「空」の部分をクリック。「新規DynamicFont」を選択。



「DynamicFont」の部分をクリックして、「Font Data」の「空」の部分をクリック。「読込み」を選ぶ。



Aileron-Black.otf を選んで、「開く」。



フォントが適用された。見た目が変わっている。これなら読めそう。

フォントサイズその他を設定する。

• Custom Fonts → Font → Settings → Size を 96 に。文字の大きさが変わる。
• Custom Fonts → Font → Settings → Use Filter を有効に。文字が少し滑らかに表示される。
• Custom Colors → Font Color Shadow を有効に。フォントに影がつく。
• Custom Constants → Shadow Offset X, Y を 12 に。影の位置をずらせる。

これらの指定で、イイ感じの表示になってきた。

スコア表示の文字列と見た目を調整する。Scoreノードを選択。



Textプロパティに「SCORE: 0」と入力。



Messageノードと同様の手順でフォントを指定する。見た目がイイ感じになればOK。



表示位置を少し調整。Rect の Position や Size を変更してもいいし、GUIでキャンバス(?)上のノードをドラッグして位置調整してもいい。

スタートボタンの文字列と見た目を調整する。StartButtonノードを選択。



Text に「START」を入力。



フォントやフォンサイズ等を指定。



位置やサイズを調整する。グリッドスナップを有効にすれば作業がしやすくなる。



それらしい位置に配置できた。



F6キーを押して実行してみる。


それっぽい表示になった。

次回はこのHUDシーンにスクリプトを追加して、スコア表示の更新や、スタートボタンを押したときの処理を追加していく。

Hudノードを選んでおいて、右上のスクリプトをアタッチするボタンをクリック。



res://scripts/ 以下に Hud.gd というファイル名でスクリプトファイルを作成。



スクリプトを記述するエディタ画面が開かれた。

スタートボタンが押された時に、ゲーム開始処理を行わないといけない。そのあたりの処理を行うメソッドを用意する。

StartButtonノードを選択。



Buttonノードがマウスクリックされると、pressed() というシグナルが発行される。このシグナルにメソッドを接続する。ノードタブをクリックして、pressed() を選択して「接続」。



Hudノードを選択して「接続」。



Hud.gd 内に _on_StartButton_pressed() というメソッドが用意された。このメソッドの中にスタートボタンが押されたときに必要な処理を書いていけばいい。

Hud.gd にスクリプトを記述していく。


記述内容は以下。

_Hud.gd

extends CanvasLayer

signal new_game

func _ready():
    pass # Replace with function body.

#func _process(delta):
#   pass

func _on_StartButton_pressed():
    $Message.hide()
    $StartButton.hide()
    emit_signal("new_game")

func update_score(score):
    $Score.text = "SCORE: " + str(score)

func show_message(text):
    $Message.text = text
    $Message.show()
    
func hide_message():
    $Message.hide()

func show_startbutton():
    $StartButton.show()

内容を簡単に説明すると…。

• _on_StartButton_pressed() : スタートボタンが押されたときの処理。
• update_score(score) : スコア表示更新処理。score には整数が入ってくる。
• show_message(text) : ゲームタイトルや「GAME OVER」等のメッセージ(?)を表示する。text には文字列が入ってくる。
• hide_messsage() : メッセージ表示を隠す。
• show_startbutton() : スタートボタンを表示する。

• $ノード名.show() で、そのノードを表示状態にできる。
• $ノード名.hide() で、そのノードを非表示状態にできる。

• signal new_game で、カスタムシグナルを作っている。
• emit_signal("new_game") でカスタムシグナルを発行。

カスタムシグナルについては少し説明が必要かもしれない。各ノードはあらかじめ色々なシグナルを持っているけれど、スクリプトファイルの最初のあたりに「signal hoge」と書いておけば、hogeシグナルを新規に用意することができる。

この hogeシグナルに何かメソッドを接続しておいて、どこかで「emit_signal("hoge")」を呼んでhogeシグナルを発行してやれば、そのタイミングで接続されているメソッドが実行される。

今回は、スタートボタンが押されたタイミングで、メインシーンに対して「スタートボタンが押されたよ」と知らせてゲーム開始処理を行いたいので、new_game というカスタムシグナルを用意した。後々、この new_game シグナルに、Main.gd 内のメソッドを接続する予定。

スクリプトを書けたので、F6キーを押して実行してみる。


スタートボタンが押された時に _on_StartButton_pressed() が呼ばれるけれど、そこでは「MessageノードとStartButtonノードを非表示にせよ」と書いてあるので…。スタートボタンをクリックするとその2つのノードが画面内で非表示になった。ちゃんとスクリプトは動いてる。

次回は、このHudシーンをメインシーンに合体させる。

Main.tscn を開き、子ノードとしてHUDシーンのインスタンスを追加する。Mainノードを選択して、上のほうにあるインスタンス追加(?)ボタンをクリック。



assets/Hud.tscn を選択。



HUDシーンが追加された。画面にもHUDが表示されて、ますますゲーム画面っぽい見た目になってきた。

メインシーンにスクリプトを追加する。Mainノードを選択して、スクリプトをアタッチ。



res://scripts/Main.gd として保存・作成する。



スクリプトを編集するエディタ画面が開かれた。

HUDシーンは、スタートボタンが押された時に new_game というシグナルを出すように作ってある。その new_gameシグナルに、メインシーンスクリプト Main.gd 内のメソッドを接続して、ゲーム開始時の処理を Main.gd 内に記述することにする。

ノード一覧ウインドウ内で、Hudノードを選択。



ノードタブをクリックすると、シグナル一覧の中に new_game というシグナルが見えるので、選択して「接続」。



Mainノードを選択して「接続」。メソッド名はそのままでいい。



メインシーンスクリプト Main.gd 内に、_on_Hud_new_game() というメソッドが追加された。



これで、スタートボタンをクリックすると _on_Hud_new_game() が呼ばれる状態になった。このメソッドの中にゲーム開始時の処理を記述していけばいい。

プレイヤーシーンについても、HUDシーンと同様に作業していく。

プレイヤー側では、「林檎を取った時」と「爆弾に当たった時」にカスタムシグナルを発行するようにして、そのシグナルを Main.gd 内のメソッドと接続してやれば、「林檎を取った → 点数を増やす」「爆弾に当たった → ゲームオーバーにする」といった処理が実現できる。

プレイヤーシーンスクリプト Player.gd に記述を若干追加する。内容は以下になる。

_Player.gd

extends Area2D

signal get_apple
signal player_dead

export var speed = 600
export var w = 96
var screen_size
var deaded = false

func _ready():
    screen_size = get_viewport_rect().size
    $AnimationPlayer.play("idle")

func _process(delta):
    if deaded:
        return
        
    var velocity = Vector2()
    if Input.is_action_pressed("ui_right"):
        velocity.x += 1
        $Sprite.flip_h = true
    if Input.is_action_pressed("ui_left"):
        velocity.x -= 1
        $Sprite.flip_h = false
        
    if velocity.length() > 0:
        velocity = velocity.normalized() * speed
        $AnimationPlayer.play("walk")
    else:
        $AnimationPlayer.play("idle")
    
    position += velocity * delta
    position.x = clamp(position.x, w/2,  screen_size.x - (w/2))


func _on_Player_body_entered(body):
    if deaded:
        return
        
    if body.kind == "Apple":
        emit_signal("get_apple")
        body.queue_free()  # kill Apple
    else:
        dead()

func dead():
    emit_signal("player_dead")
    
    deaded = true
    $AnimationPlayer.play("dead")
    $CollisionShape2D.set_deferred("disabled", true)
    
    # wait 3 sec
    yield(get_tree().create_timer(3), "timeout")
    
    deaded = false
    $AnimationPlayer.play("idle")
    $CollisionShape2D.disabled = false

スクリプトの最初のほうに、「林檎を取った時」と「爆弾に当たった時」に使うカスタムシグナルが追加してある。

signal get_apple
signal player_dead

そして、「林檎を取った時」は emit_signal("get_apple") を呼び、「爆弾に当たった時」は emit_signal("player_dead") を呼んでやれば、それぞれのタイミングでシグナルが発行される。

プレイヤーシーン側でカスタムシグナルを用意できたので、Main.gd 内のメソッドと接続してやる。Playerノードを選択。



ノードタブをクリックして、get_apple() を選択して「接続」。



Mainノードを選択して「接続」。



同様に、player_dead() シグナルも接続してやる。player_dead() を選択して「接続」。右クリックして「接続」を選んでも良い。



Mainノードを選択して「接続」。



これで Main.gd 内に、以下のメソッドが追加された。

• _on_Player_get_apple() : プレイヤーが林檎を取った時に呼ばれるメソッド
• _on_Player_player_dead() : プレイヤーが爆弾に当たった時に呼ばれるメソッド

それぞれのメソッドに、処理を書いていけばいい。



Main.gd 内に、ゲーム開始時の処理、スコア増加、ゲームオーバー時の処理を書いてみた。内容は以下になる。

_Main.gd

extends Node

var game_title = "NEWTOTOTONE"
var score = 0

func _ready():
    score = 0

#func _process(delta):
#   pass

func _on_Hud_new_game():
    new_game()

func _on_Player_get_apple():
    add_score()

func _on_Player_player_dead():
    game_over()

func new_game():
    score = 0
    $Hud.update_score(score)
    $ItemGenerator.start()
    
func add_score():
    score += 10
    $Hud.update_score(score)
    
func game_over():
    $ItemGenerator.stop()
    $Hud.show_message("GAME OVER")
    yield(get_tree().create_timer(3), "timeout")
    
    # todo: kill all items
    
    $Hud.show_message(game_title)
    $Hud.show_startbutton()

• _on_Hud_new_game() : スタートボタンが押されたときに呼ばれるメソッド。
• _on_Player_get_apple() : プレイヤーが林檎を取った時に呼ばれるメソッド。
• _on_Player_player_dead() : プレイヤーに爆弾が当たった時に呼ばれるメソッド。
• new_game() : ゲーム開始時の処理。
• add_score() : スコアを増やす処理。
• game_over() : ゲームオーバー時の処理。

ゲーム開始処理やゲームオーバー処理を書いたので、林檎や爆弾を発生させる ItemGenerator.gd にも若干の修正が必要になる。ゲームが開始されるまでは、林檎や爆弾を発生しないようにしたい。

ItemGenerator.gd の内容は以下になる。以前書いたスクリプトとの違いは、_ready() 内の start() をコメントアウトした部分だけ。

_ItemGenerator.gd

extends Node2D

export (PackedScene) var Apple
export (PackedScene) var Bomb
export var w = 96
var rnd = RandomNumberGenerator.new()
var screen_size
var born_rate = 100
var born_enable = false

func _ready():
    rnd.randomize()
    screen_size = get_viewport_rect().size
    born_rate = 100
    born_enable = false
    
    # start()  # Delete in production environment

func start():
    born_enable = true
    born_rate = 100

func stop():
    born_enable = false

func generate_item():
    if born_enable:
        var x0 = w / 2
        var x1 = screen_size.x - (w / 2)
        var x = rnd.randi_range(x0, x1)
        var item
        if rnd.randi_range(0, 100) > max(20, born_rate):
            item = Bomb.instance()
        else:
            item = Apple.instance()
        item.position.x = x
        item.position.y = -w
        $Items.add_child(item)
    
func update_rate():
    if born_enable:
        born_rate -= 3
        if born_rate <= 1:
            born_rate = 100

F6キーを押して実行してみる。

• スタートボタンを押すとゲームが始まってくれた。
• 林檎を取るとスコアが増えてる。
• 爆弾に当たるとゲームオーバーになる。

ちゃんとゲームっぽい感じで動いてくれた。

次回は、もっとゲームらしくなるように雑多な装飾をしてみる。BGMや効果音をつけてみたり、背景画を表示したりする予定。

スクリプト内に、以下のような記述が出てくるけれど。

yield(get_tree().create_timer(3), "timeout")

これは Godot Engine において「n秒間待ってからその後の処理を続ける」というお決まりの書き方らしい。

おそらくだけど、その場でTimerノードを発生させて、Timerノードがn秒経過するとtimeoutシグナルを出すからそれを待つ、という処理をしているのではないかなと…。たぶん。理解が間違ってるかもしれないけど。

利用するサウンドファイルは以下。自作してみた。CC0 / Public Domain ってことで。

_sound_files.zip

解凍すると以下のファイルが入ってるはず。

• bgm.ogg ... BGMファイル
• damage.wav ... ダメージを受けた時のSE
• getitem.wav ... 林檎を取った時のSE

Godot Enigne のエディタ画面上に、ogg や wav をドラッグアンドドロップする。



res://直下にコピーされた。



ドラッグアンドドロップして、resources/ 以下に移動した。

各サウンドファイルをループ再生させるかどうかは、インポート時の設定項目で指定できる。

bgm.ogg のインポート設定を確認。bgm.ogg を選択して、インポートタブをクリック。「Loop」に有効になっていることを確認。この ogg ファイルはループ再生される。



damage.wav のインポート設定を確認。damage.wav を選択してインポートタブをクリック。「Loop」が無効になっているので、この wavファイルは再生すると1回だけ再生される。



getitem.wav のインポート設定を確認。「Loop」が無効になっているので、1回だけ再生される状態。

Godot Engine でサウンドファイルを再生したい時は AudioStreamPlayerノードを使うらしい。

Main.tscn を開いて、Mainノードの下に AudioStreamPlayerノードを追加する。Mainノードを選択して、ノード追加ボタンをクリック。



「Nodeを新規作成」ウインドウで「audio」と打ち込むとリストアップされるので、「AudioStreamPlayer」を選択して「作成」。



AudioStreamPlayerノードが追加された。



分かりやすくするために、ノード名を「Bgm」に変更。

AudioStreamPlayerノードに、鳴らすサウンドファイルを指定する。

Bgmノードを選択。Streamプロパティに bgm.ogg をドラッグアンドドロップ。



サウンドファイルが指定された。

メインシーンのスクリプト Main.gd 内で、BGMの再生、停止を指定する。

• メソッド new_game() 内に $Bgm.play() を追加。これでゲーム開始時にBGMが再生される。
• メソッド game_over() 内に $Bgm.stop() を追加。これでゲームオーバー時にBGM再生が停止される。

プレイヤーシーンにもサウンドを追加する。Player.tscn を開く。Player.tscn を選択して右クリック。「シーンを開く」を選択。



Playerノードを選択してノード追加ボタンをクリック。



ダメージSEと林檎取得SEの2種類を鳴らしたいので、AudioStreamPlayerノードを2つ追加する。



分かりやすくするために、GetAppleSe、DamageSe にリネーム(名前変更)。



GetAppleSe と DamageSe の Stream に、damage.wav、getitem.wav をドラッグアンドドロップして割り当てる。




プレイヤーシーンのスクリプト Player.gd 内でSE再生を指定する。


メソッド _on_Player_body_entered(body) 内に以下を追加。

• 林檎を取った時に、$GetAppleSe.play() を呼ぶ。
• 爆弾に当たった時に、$DamageSe.play() を呼ぶ。

それぞれ1回鳴らしたら再生が終了するので、BGMと違って .stop() は呼ばなくていい。

BGMの音量がちょっと大き過ぎる気がしてきたので、AudioStreamPlayer のプロパティで調整してみる。

メインシーンのBgmノードを選択して、「Volume Db」にマイナス値を指定。これで音量を下げることができる。ここでは -7 を指定してみた。

メインシーンを開いてる状態でF6キーを押して動作確認。



音が鳴ってくれた。

次回は背景をどうにかしたい。灰色だけの背景は寂しい…。

Godot Enigneのエディタ画面にエクスプローラ等から pngファイルをドラッグアンドドロップしてインポートする。



res://resources/ 以下に画像を置いた。



bg02a.pngを選択した状態でインポートタブをクリック。Filter のチェックを外して無効にして「再インポート」。2Dゲームを作る時は、Filter のチェックを外しておいたほうが良い。


あ。しまった。このスクリーンショット、「再インポート」に丸をつけるのを忘れてるなあ…。「再インポート」をクリックしないと反映されないので注意。

Mainノードの下に Spriteノードを追加。このSpriteノードにBG画像の表示を担当してもらう。



分かりやすくするために、「Bg」にリネーム。



Playerノードの上にドラッグアンドドロップして移動する。これでプレイヤーの後ろに表示される状態になる。

Bgノード(Sprite)のテクスチャを指定。Textureプロパティの「空」の部分をクリック。「読込み」を選択。



res://resources/ の中にある bg02a.png を選択して「開く」。



BG画像が表示された。

BG画像の表示位置がずれてるので調整する。「Offset」の「Centered」のチェックを外すと、基準点が左上になってBG画像がゲーム画面を覆うような位置に表示される。


Centered にチェックを入れると基準点が画像の中央になる模様。チェックを外すと左上になる。基準点の位置をずらしたい時は Offset x,y の値を調整する。

F6キーを押して動作確認。


背景画像(BG画像)が表示された。

これはこれでいいのだけど、せっかくの2Dゲームだから、タイルマップを使ってBG表示してみたい。次回は TileMap を使って同じことをしてみる。

Godot Enigneのエディタ画面に、エクスプローラ等から bgchip.png をドラッグアンドドロップしてインポート。



res://resources/ 以下に bgchip.png を移動した。



bgchip.pngを選択した状態でインポートタブをクリック。Filterのチェックを外して「再インポート」。

シーンを新規作成。シーン → 新規シーン。



「その他のノード」を選択。



「tile」と打ち込んで絞り込み検索。TileMapノードを選択して「作成」。



TileMapノードが追加された。

タイルマップ(TileMap)を使うには、タイルセット(TileSet)が必要になる。Tile Setプロパティの横の「空」をクリック。「新規 TileSet」を選択。



更に、TileSet と表示されている部分をクリック。



タイルセットを設定していくためのウインドウが、Godot Engine エディタ画面の下のほうに表示された。

タイルセットの設定をしていく。bgchip.png をドラッグアンドドロップして、タイルセットの画像リスト(?)の中に入れる。



タイルセットが使う画像として、bgchip.png を登録できた。今回使う画像は各タイルがビッシリと詰まっているので、右上のほうにある「新しいアトラス」をクリック。



どのタイルからどのタイルまでを使うのかを指定するけれど、グリッドにスナップさせながら作業したほうが楽なので、「スナップとグリッドの表示を有効にする」ボタンをクリック。有効になると青色で表示される。



左上から右下までドラッグして、使う範囲を指定する。



もし、タイルサイズが合わない時は、インスペクタウインドウ内の Step x,y を設定するといいかもしれない。今回は最初から (32, 32) が入ってた。

TileMapノードをクリックして選択すると、キャンバス上でタイルを並べていくモードになる。右のほうに使えるタイルの一覧が表示されているので、使いたいタイルをクリックしてからキャンバス上で並べていく。もしかすると、Cell → Size x,y を調整しないといけないかもしれない。今回は1タイルが 32 x 32ドットなので、Size x,y も (32, 32) にした。



上のほうに、鉛筆、バケツツール(塗り潰し)、セルを取得、選択範囲作成、のツールが並んでいるので、その都度切り替えつつタイルを並べていく。


ちなみに、鉛筆ツールは左クリックでタイル配置、右クリックでタイル消去になっている。また、Shift+左クリックで線を引いたり、Ctrl + Shift + 左クリックで長方形塗り潰しもできる。

それらしく配置した。

TileMapノードを BgTileMap にリネーム。



シーン → 名前を付けてシーンを保存。res://assets/ 以下に BgTileMap.tscn として保存する。

メインシーンに組み込む。Main.tscn を開いて、BgTileMap.tscn を子ノードにして Playerノードの上に位置するように配置。

F6キーを押して動作確認。


それらしい表示になった。

次回は…。スタートボタンをキーボード操作で押せるようにしたり、ゲームウインドウを最大化した際に表示も追随するように設定する予定。

ゲームを実行するとスタートボタンが表示されるけど、一々マウスクリックして先に進むのが面倒臭い。キーボード操作で押せるようにしたい。

HUDシーン(Hud.tscn)を開いて、StartButtonノードを選択。



Shortcutプロパティの右の「空」をクリック。「新規ShortCut」を選択。



「ShortCut」をクリックして、その下の「Shortcut」の「空」をクリック。「新規InputEventAction」を選択。



「InputEventAction」をクリックして、その下の「Action」に「ui_accept」と入力。


「ui_accept」には、プロジェクト設定でいくつかのキーが ―― デフォルトではEnterキーやSpaceキーが割り当てられてる。

これで、ゲーム実行直後、スタートボタンが表示されている状態で、EnterキーやSpaceキーを叩けば先に進むことができるようになった。

現状では、ゲームウインドウの最大化ボタンをクリックすると以下のような妙な表示になってしまう。


最大化した時はそれらしく表示してほしい。プロジェクト設定の Stretch設定を変更すれば対応できる。

プロジェクト設定を開く。上のほうのメニューから、プロジェクト → プロジェクト設定。Dispaly → Window → Stretch と辿り、Mode に viewport、Aspect に keep を指定して「閉じる」。



これで、最大化時に表示が追随してくれる状態になった。



次回は、林檎を取った時に「+10」みたいなエフェクト？を表示させてみたい。