プログラミング

ゲームの作り方を2週間で教える:物理エンジンでゲームを動かそう

こんにちわ!今回皆さんに学んでいただくのは「物理エンジン」についてです。物理エンジンと聞くとうわぁ…と拒否反応を示す方もいると思います。僕もそうです。

ですが今回はたったの7文字で物理エンジンを起動させることが出来ますのでご安心ください!

前回のあらすじ

遂にコードを打ち始めたルアは画像を表示することの楽しさに気づき、風船を膨らまし続けるのだった。おさらいとして前回の記事も読んでみてね!

あわせて読みたい
ゲームの作り方を2週間で教えていく!まずはクソゲーからこれまでのあらすじ ルアは同じ高校、同じ部活の後輩コロナにプログラミングを教えてもらっていた。一方コロナはコロナでルアの事が好きだから...

もう関係性とかそういうのはないから。淡々と行こう淡々と。

STEP1:まずは透過させていくぞ!

コロナさん
コロナさん
それではこのゲームに使う画像を表示させるところまで終わりましたね
ルアくん
ルアくん
おう!出来たぜ!今ならtwit〇erくらいなら作れそうだ!
コロナさん
コロナさん
なるほど(シカトしとくか)
ルアくん
ルアくん
次は何するんだ?
コロナさん
コロナさん
画像を透過していきます!
ルアくん
ルアくん
透過?なんだかアダルトな感じがするぜ!

透過とは

  • 画像などを透明にする事
  • 画像などをどれだけ透明にするかを透明度と言います。 1→0の方向で透明度は強くなります
  • 透明度を程よくすることで、画像を同時に表示した際の違和感を軽減することが出来ます
ルアくん
ルアくん
なるほどな!どうすれば透明度をいじれるんだ?

balloon.alpha = 0.3

コロナさん
コロナさん
これを打ち込んでCtrl+S(mac:command+S)をお願いします!
ルアくん
ルアくん
おおおお!透けている!
コロナさん
コロナさん
良い感じです!0.8ぐらいが丁度いいですよ!
ルアくん
ルアくん
よっしゃあああ!

STEP2:物理エンジンを使っていく!

コロナさん
コロナさん
次は物理エンジンをこのゲームに追加していきます!
ルアくん
ルアくん
物理エンジン?急に難しそうな響きだぜ!
コロナさん
コロナさん
確かに響きは難しいですがやることは簡単です!

local physics = require(“physics”)

physics.start()

コロナさん
コロナさん
これだけで物理エンジンを使う事が
ルアくん
ルアくん
あれ?何も変わってないぞ?
コロナさん
コロナさん
ですね。今はまだ「起動しただけ」ですから。ここから物理エンジンに色々な命令を出していきますよ

physics.addBody( platform, “static” )

ルアくん
ルアくん
おぉ!また何も変わらん!
コロナさん
コロナさん
ですね。でもこれでplatformという画像に体が与えられたんです!
ルアくん
ルアくん
どういう事だ?
コロナさん
コロナさん
次は風船に体を与えましょう!

physics.addBody( balloon, “dynamic”, { radius=50, bounce=0.3 } )

コロナさん
コロナさん
打ち込んだらCtrl+S(mac:command+S)で…
ルアくん
ルアくん
風船が…落ちた…だと!?
コロナさん
コロナさん
Corona場でCtrl+R(mac:command+R)で何回も風船を落とせますよ!
ルアくん
ルアくん
おぉ!風船が跳ねてる!
コロナさん
コロナさん
そうなんです!bounce 0.3というコードが風船の跳ねる力を表してます!
ルアくん
ルアくん
なるほど!

physicsについて

( balloon, “dynamic”, { radius=50, bounce=0.3 } )というコードは

balloonという大きさが50で跳ねる力が0.3の動く物質という意味です。

  • dynamic 動く物質です
  • static 動かない物質です
  • radius 50 この物質は大きさ50の円形です
  • bounce 0.3 跳ねる力は0.3です

といった意味があります。跳ねる力を変えたりすると面白いですよ。

コロナさん
コロナさん
ようやく風船が動くようになりました!

STEP3:タップで風船を浮かせよう!

コロナさん
コロナさん
次は風船をタップで浮かせられるようにします!
ルアくん
ルアくん
おぉ!ゲームっぽい!
コロナさん
コロナさん
まずはこのコードを打ち込んでください!

local function pushBalloon()

end

ルアくん
ルアくん
打ち込んでタップしたけど何も起こらないぞ…
コロナさん
コロナさん
そうですね。今はまだ「pushBalloomという機能を付けるよ」と宣言しただけでタップしたら風船が浮くという機能はついてないんです
ルアくん
ルアくん
なるほど、名前を先に付けたのか!
コロナさん
コロナさん
ですね!次に機能を追加するためにこちらを打ち込んでください!

local function pushBalloon()
balloon:applyLinearImpulse( 0, -0.75, balloon.x, balloon.y )
end

ルアくん
ルアくん
まだ何も起こんないぞ!
コロナさん
コロナさん
ここでもまだ縦方向に-0.75の衝撃を与える機能を付けただけです!次はいつ-0.75の衝撃を与えるのかを打ち込んでいきましょう

balloon:addEventListener( “tap”, pushBalloon )

ルアくん
ルアくん
うおおおお!浮いた!浮いたぞおおお!!
コロナさん
コロナさん
はい!これでtapしたときにpushBalloonという名前の機能が発動するようになりました!
ルアくん
ルアくん
少しややこしいな…
コロナさん
コロナさん
そうですね。基本的に機能をつけるときはまず名前を付けるという事を忘れないでください!そうしないと、いちいちどういった機能を使うか打ち込まないといけないので
ルアくん
ルアくん
面倒なように見えて、便利なんだな!
コロナさん
コロナさん
そうなんです!

次回予告

いかがでしたでしょうか?皆さんクソゲーは作れましたか?風船や背景の画像を変える事で全然違う雰囲気のゲームになりますので、是非色々試してみてください!

以前見せたこのゲームも、実は背景と風船の画像を変えただけなんです。

さて次回はこのゲームにもう1つの遊び要素を加えていきます。ヒントは↑の画像にある15という数字ですね。わかる人いるかな。大体わかるか。わかっちゃうか。いやわからないならわからないでいいですからね!

ではまた!