おりんくうと学ぶ2Dゲー開発

のほほんと進むゲーム作りブログ

3. Love2Dの基本 その1 画面表示

Love2Dでのプログラミング

お燐 それじゃあお待ちかねコードの書き方の時間だね!

お空 よっ待ってました!

お燐 早速説明を始めるんだけど前回作ったHello WorldにはLove2Dの基本が詰まっているからそれを使って見ていこう。

お空 確かHello Worldはこんなコードだったよね。

function love.draw()
    love.graphics.print('Hello World!', 400, 300)
end

お燐 これもそうなんだけどLove2Dで何かをするときには主に「loveモジュール」ってものを使っていくんだよ。loveモジュールはLove2Dに備え付けられてる便利機能みたいなものだね。loveモジュールには二つの種類に分けられるよ。それが「関数」と「コールバック関数」なんだ。

お空 先輩!いきなり関数とかコールバック関数って言われても全然分かんないッス!

お燐 大丈夫、下のHello Worldのコードに色を付けて分けたからそれを見てごらん。コールバック関数ってのは紫色のところのことで関数ってのは茶色のところのことだよ。

function love.draw()
    love.graphics.print('Hello World!', 400, 300)
end

お空 前回のコードもモジュールを組み合わせて作られていたんだね!でもどれが関数でどれがコールバック関数かは分かったけどやっぱり仕組みが分かんないや...。

お燐 そりゃそうだよね~。まあひとつひとつ説明していくからまずは普通の関数の方から見ていこうか。

関数

お燐 Love2Dにはいろんな処理をしてくれる関数が用意されているんだ。さっきの例で言うと「love.graphics.print関数」っていう関数が文字を画面に表示させているんだね。実際に文字を表示したり音楽を流したりっていう具体的に何かをするのは全部この関数が行うんだよ。

お空 じゃあその関数の後ろにある括弧の中で細かい設定をするのかな?

お燐 そう!この関数の後ろにある括弧に入れるものを引数(ひきすう)と言うんだ。引数の内容を変えることによってその関数の細かい設定をするんだね。

 

>関数の決まり事

関数名(引数)

 

お燐 ちなみに引数が二つ以上必要な時は , で区切るんだよ。関数によって必要な因数の数と種類も決められているんだ。英文と同じように , の後に半角スペースを一つ入れると見やすくなるね。

 

関数の決まり事(引数が二つ以上のとき)

関数名(引数1, 引数2, ...)

 

お燐 引数が必要ないときはなにもいれないで空欄にするんだ。括弧は無くさないからここは注意しようね。

 

関数の決まり事(引数が必要ないとき)

関数名()

 

関数を使ってみよう

お空 引数を変えれば画面の表示が変わるんだよね。Hello Worldのコードをちょっといじってみてもいいかな?

お燐 前回から使ってるlove.graphics.print関数の引数はこんな感じだよ。

love.graphics.print関数の書き方

love.graphics.print(’表示させる文字’, x座標, y座標)

表示させる文字のところはデフォルトのフォントの関係で今は英語しか使えないから気を付けてね。

 

~少女プログラミング中~

 

お空 文字の部分を変えると画面に表示される文字が、数字の部分をいじると画面の表示される場所が変わったよ。x座標を変えると左右に移動してy座標を変えると上下に移動したね。

引数部分

(左上)('Oku is here!', 80, 70) (右上)('Oku is here!', 480, 70) (左下)('Oku is here!', 80, 400)(右下)('Oku is here!', 480, 400)

f:id:stickBBB:20170801013610p:plain f:id:stickBBB:20170801013702p:plain

f:id:stickBBB:20170801013710p:plain f:id:stickBBB:20170801013717p:plain

 

お燐 それは画面の場所を指定するのにLove2Dでは座標平面が使われているからなんだよ。

お空 数学にも座標平面があったよね。アレみたいな感じ?

お燐 そんな感じそんな感じ。ただ数学の座標平面とは違って左上を基準にして右向きにx軸、下向きにy軸が伸びているんだ。ちなみに文字や画像も左上が基準になっているよ。例えばx座標を30、y座標を10にするとこんな感じになるんだね。

f:id:stickBBB:20170726191843p:plain

お空 次はコールバック関数だね。

コールバック関数

お燐 コールバック関数はその名の通りCall Backすなわち呼び出す関数だよ。さっきの関数と違ってfunctionから始まってendで終わるのが特徴だね。このfunctionからendまでの一連のコードをコールバック関数の種類によって呼び出す場所とかタイミングがそれぞれ違うんだ。

コールバック関数の決まり事

function 関数名()
    関数の内容
end

お空 呼び出すってどういうこと?

お燐 例えばHello Worldで使ったlove.draw関数は中に書かれていることを画面上に表示させているんだ。呼び出すって言うのは「コールバック関数の中に書かれた内容を実際に使えるようにする」ってことなんだよ。

love.draw関数の決まり事

function love.draw()
    画面に表示する内容
end

お燐 逆に言うとlove.draw関数の中に書かれていないものは画面には表示されないんだ。試しにmain.luaの中身をlove.graphics.print('Hello World!', 400, 300)だけにしてごらん?

お空 ありゃ?何も表示されないね。

f:id:stickBBB:20170801023948p:plain

お燐 こんな風にコールバック関数の中に書かれていないと呼び出されないから表示がされないんだね。

tabキーとスペースキー

お空 あとコールバック関数の中の文の前に微妙なスペースがあるけどこれはなんなの?

お燐 これは関数の内容がfunctionからendまでの一連のブロックの中の話ですよってことを表しているんだ。このスペースがあるとVSCodeが自動でコールバック関数の始まりと終わりをつないでくれるんだよ。

f:id:stickBBB:20170801152815p:plain

ちなみにこのスペースはtabキーで表す方法とスペースキーで表す方法があるんだ。

お空 tabキーはキーボードの左上あたりにあるやつだね。

お燐 そのtabキーは半角スペース4文字分のスペースを表しているんだけど「見えない一つの文字」って扱いなんだ。だから消すときも一度のBack Spaceで消せちゃうしファイルを少ない容量で済ませることができてすっごい便利。

お空 ほんとだ!でもなんでこんなに便利なのにまだスペースキーを使う人がいるの?

お燐 tabキーは開発環境なんかで表示が違うことがあるんだよ。でもそれは大規模な開発のときなんかの話であってあたいは個人製作レベルなら少ない容量でサクサク動かすことを優先した方がいいと思う。ただし段落の初めでずらす以外の目的では下手にtabキーは使わないことだね。

お空 よくわかんないけどtabキーを使えばいいってことね。

いったんおしまい

お燐 さっき画像の表示の仕方を教えるって言ったけど長くなっちゃったから次に持越ししようか。

お空 今回だけでも結構いろんなことが分かったからね。

  1. Love2Dには「関数」と「コールバック関数」というモジュールってものがある
  2. 関数の後ろにある括弧には引数を入れて細かい設定をする
  3. Love2Dの画面の位置は座標で表現する
  4. コールバック関数は中に書かれたものをまとめて呼び出すことができる
  5. コールバック関数の中の文はtabキーでずらして見やすくする

とこんなところかな。

お燐 次回は画像を表示したり音楽を流したり日本語を表示できるようにしたりってところを見ていくよ。外部からのデータの読み込みとその使い方がテーマだね。