解説Box2dを使ったゲームの授業で発表したものです。豚がトンネルの上から矢を放ちます。今までは、矢の動きは直線的に同じ速度にしか動きませんでしたが、Box2dを使えば、下に重力を加えて、矢はリアルな放物線を描くことができます。先生のサンプルコードの中に、前回説明したパワーメーターがあったのですが、これが出る前に、息子は角度メーターを作りたいと作り始めていたので、そちらを付けることにしました。角度は、クリックしたところの角度を取ることができるので、どちらかと言うとこちらのほうが簡単です。・目標物(だるま)までの距離を長くして、透明の石を動かして画面をスクロールさせて見せる機能をつける・角度メーターをつけてクリックした角度で矢を飛ばす・modeのパラメータをつけて、スクロールしている間は撃てないように制御する・最後だるまが落ちるときに、だるまにスクロールレンジを設定して、落ちるだるまが見えるようにするなどです。画面のスクロール画面より外のドカンに目標物があるので、まず、それを見せます。そのために、透明の箱を作って飛ばしてから戻すという方法でやってみました。(息子のアイデア)透明な箱には、setScrollRangeというプログラムを設定します。これは、設定したパディングを常に保ってくれるというもので、スプライトを移動させても画面から出てしまうことがなく、画面のほうがスクロールしてくれるというものです。これは今井先生がプログラムを作ってくださいました。箱にこれをつけて移動させれば、画面がスクロールするというわけです。箱の色はテスト用にredにしておき、あとで消します。そのままではずっと向こうに移動し続けてしまうので、壁にぶつかって止まるように、壁も配置します。scene.addChild(wall);これで、scroはだるまより向こうに飛んで行って、壁にぶつかって落ちます。スクロールしている間は矢が発射できないように、幕を作って、それをタッチできないようにします。ここではbackiというスプライトを画面一杯に大きさで上にかぶせています。});適度なタイミングで豚の方に戻します。帰ってくるときにだるまにぶつからないように調節します。-2))戻ってから、scroと壁は消します。55);角度メーターをつくる上下に振れるメーターをつくります。これを、90度まで動かしてから、0度まで戻すという動きをloopさせれば、ワイパーのようなメーターができます。yの値が複雑なのは、豚の矢の位置に合わせるために微調整したからです。ここで、あとでrotationと対応させるときに、ExSprite(1、32)とするより、(32、1)としたほうがやりやすかったかもしれません。途中で気づきましたが、90度ずらすだけなのでそのままやってしまいました。sounds2.play();角度メーターと矢の角度を連動させるここが角度メーターの肝ですが、簡単です。bar.rotationというプロパティが、タッチしたときのbarの角度を取ってくれるからです。この2.5・・ってなんでしょう・・自分でやったのに忘れました・・多分、bar.rotationというのは、動いているbarをタッチしたときの角度になるので、0〜90の値そのままでは、addImpulseに入れる値としては大き過ぎるので、それで、一旦100で割って、すると今度は小さくなりすぎるので、調節して2.5倍くらいにすると、矢の飛ぶ距離としてはちょうどよくなったのだと思います。メーターのスプライトは(1、32)なので、垂直に立った状態から倒す方向で動かしています。x方向は、bar.rotationの値に比例させればいいので、その比例定数は的との距離で適当に調整して、2.5/100となりました。逆にy方向は、傾きが大きくなるほど、y方向への力は小さくなるので、(傾きの最大値90度のとき0となる)(90-bar.rotation)に比例させればよく、これも調整して、2.5/90となり、上方向にとばすので-(マイナス)となります。1.2)でいい具合に飛ばすことができました。上で、矢を飛ばす力については決めました。画面上の画像としては、そのままでは矢が真横に出て、真横のまま放物線を描くことになるので不自然です。(Box2dはそこまではやってくれない)そこで矢を出す時の角度もメーターの角度と同じになるようにして、飛ばしたあとも角度に合わせてゆるやかに回転させるようにしました。矢と同時に一旦消したスクロール用の透明の箱を、矢をフォローして一緒に動くようにします。これで、矢が遠くに飛んでも画面がスクロールして見ることができます。});矢が外れたら画面を豚に戻す矢に衝突判定をつけ、地面に落ちたら矢をフォローしていたscroは消して、別のscro2という箱を出し、それを豚のところまで戻すことで画面をスクロールさせます。矢が地面に落ちた時点で箱を出します。219)という条件分岐をつけます。矢がだるまを超えたときは、戻るときに高さが足りなくてだるまや土管にぶつかって戻ってこれなかったので、scro2の高さを高くしました。32;)外れた矢がそのままだと、次に外れた矢がその上に乗ってしまったとき、地面との衝突判定が効かなくなるので、外れた矢は消します。画面をスクロールさせている間に、矢が撃ててしまうと、スクロールがおかしくなってしまうので、その間は撃てないように、modeのパラメーターを使って制御します。だるまについても、地面に落ちたときにゲームクリアにすると、だるまが跳ね返って地面に衝突する度に何度もゲームクリアが発動してしまうので、地面に衝突した最初の一度目だけゲームクリアとなるようにします。*/だるまにスクロールレンジをセットするだるまに矢が当たって、土管から落ちる時(ゲームクリアのとき)、だるまが見えなくなってしまうとつまらないので、だるまにsetScrollRangeをつけます。だるまのy座標を見ると、218.79968127001965なので、(box2dだと重力によって、ほんの少し下がるようです)落ち始めたらセットとなるようにします。だるまが地面に落ちてからもスクロールし続けると、ゲームクリアの文字やお殿様の画像がずれてしまうので、地面に落ちたら外します。角度メーターと矢の飛び方を連動させる調整のところ以外は、アイデアも含めて息子が頑張りました。先生もおっしゃっていたけれど、一人で全部できるものなんてないのだから、(そもそも基のゲームのつくりかただって全部先生から教えてもらったものなのだし)、手伝ってもらったことを負い目に感じる必要はないと思うのですが、息子は手伝ってもらったにしても自分でコードを打ったという実感がないと嫌みたいなので、その辺さりげなく手伝うようにしています。息子も頼ってくれるので、それも嫌でないうちは、協力したいと思います。だいたい以上の流れで作りましたが、一つ機能を増やすと、その影響でそれまでのところに不具合がでて調整するために何かを付け足さないといけない、また一つ増やすとまた調整、この繰り返しです。おそろしく何度もプレイしなければなりません。今までもそうでしたが、今この記事を書いていて、改めてそれを実感しました。ゲーム作りって大変ですね。パズルを解いていくみたいで本当に面白いです。私にとってはゲーム作り自体が、今までで一番面白いパズルゲームです。21:22>>一つ機能を増やすと、その影響でそれまでのところに不具合がでて>>私にとってはゲーム作り自体が、今までで一番面白いパズルゲームです。プログラミングを勉強する前は、当たり前に遊んでいたテレビゲームが、じつはその動作ひとつひとつを要素分解して、組み立てられていることを知りました。ひとつひとつの動作は「ほんのちょっと」でも、ちゃんと命令が書かれていたんだと。それが「なぜ動いている?」なんて、考えもしませんでした。いつもコードを打つことなく、のほほんと授業を観察しているりょうの母さん目線で言うとコードフレンズの子どもたちも、cf307さんも、プログラミングという名のゲームを本当に楽しんでいるなぁと感じています。一生懸命な子どもたちを眺めていると、こちらも楽しい気持ちになりますし、そしてその成果物を見学させてもらえるのも、有り難く思っています。12:14いつも届くコメント着のお知らせメールがなぜか来なくなっていて気づきませんでした・・コードを打たなくても、私からしてもまずプログラミング教室に通わせようとする親御さんたちってすごいと思います。PCや機材を貸し与え、送迎して協力を惜しまないってすごいわあ、さらには授業を観察しながら一緒に楽しめるなんてすごいです。止まらない解説大好きです。息子も刺激されたのか、自分から詳しく説明しだして、おぉ!と思った次第です。コメントをキャンセルメールアドレスが公開されることはありません。