命名:メガホンDEポン(完成形)
2020/07/26

基本的なプログラミングから始めて、ゲーム用の技術として紹介したいもの積み上げていきながらなんとなく作り上げたミニゲームですが、 形にはなったのでこれを完成としてメガホンDEポンと名付けることにしました!
完成形
以下がメガホンDEポンの完成形です!
苦労したのは意外にも…

ここの自作ブログではカテゴリがひとつしか設定できなかったので、 ブログシステムを改修してカテゴリ設定を複数できるようにしました。 現在は2つまで対応しています。 あとは数を増やすだけなので3つ以上も簡単にいけます。
プログラミングって1つと2つは大きな違いですが、きちんと作れば2つと3つ以上は大差ないことが多いのですよね。 実は結構ちゃんと作っていたつもりで1つ→2つもそこまで大変じゃないだろうと思っていたのですが、意外にも苦労しました。 でも今度こそちゃんと作ったので3つが必要なときがきても大丈夫…たぶん!
背景について
今回のゲーム画面の背景はSVGという、テキストで書けるグラフィックフォーマットで作りました。 ランダムに数多く動かすために一部テキストはPythonというプログラミング言語で書き出したものを貼り付けました。 パッと作ったものですがせっかくなのでそのPythonプログラムを載せておきます。参考に…なるのかな。
######################################################################## # imports ######################################################################## import random import math ######################################################################## # for uniionBgStars.svg ######################################################################## for i in range(100): theta = random.random() * math.pi * 2 r = 1024 x = r * math.cos(theta) y = r * math.sin(theta) t = 2 + random.random()*2 cr = 1 + (i % 3) % 2 print( ' <circle r="%d"><animateMotion dur="%fs" repeatCount="indefinite" path="M0,0 L%d,%d" /></circle>' % ( cr , t , x , y ) )
ざっくり説明しますと、開始地点は原点として、角度をランダム決めてその方向に、固定距離で目的地を設定します。 そして目的地までの到達時間をランダムにすると、速度がバラバラになります。 また到達後に繰り返すようにすると、時間がバラバラなため次の開始タイミングもバラバラになるのでランダム性が増す形になります。 これで、速さと方向がランダムな直線移動する星のようなものが中央からぶわあっと出る感じになります。
なおこのプログラムはSVGに貼り付けるための必要最小限のテキストを出力するだけです。 SVG側では中央に黒いマスクを置くなどの工夫しています。 詳しくは画像ファイルのソースをご確認ください。
まとめ
メガホンDEポンの完成形の紹介でした。
とは言えまだ紹介したい技術はまだあります。 このゲームのメガホンとボールの当たり判定、および当たった後の跳ね返りについては少なくとも紹介したいと思います。 ひととおり紹介し終わったら、最後にまとめを出して一旦このゲーム関連は完了…かなあ。
今回はいきあたりばったりで作りましたけれど、先に完成形を作ってから切り出して解説した方が良さそうな気がするので、 次があればそうしてみようかと、今のところは考えています。
補足
・今回ゲームの実装に使用しているプログラミング言語はWeb業界で一般的に使われる「JavaScript」です。・Pythonプログラムの r = 1024 の行は for ループの上に置いた方が実行効率が高いですが、今回は見やすさ優先で。
・画像内のラスタライズ文字フォントにOpen Font LicenseのNoto Sans Japaneseを使用しております。
カテゴリー:メガホンDEポン,Python
Copyright (C) Logic Lovers Inc.