自作ゲームの大福島

プログラムの使えない素人がCF2.5(インディゲームクリエーター)を使ってゲームを作ってみるブログです

スポンサードリンク

レビュー 続: 言語の壁を越えて…

前回レビューの続きです。

 

それでは、CF2.5(インディゲームクリエーター)は、初めてゲーム作りたい人にとって「買い」なのか?

という問題に関してですが、今回も結論から行きます。

 

先に「RPGツクール」とか「ウルフRPGエディター」なんかを触ってからの方がいいと思います

*今回はこのツールの内容に関しては触れません

 

これは、私自身上記二つのツールをどちらも先に触っていたので、確信を持っています。

「いや、俺が作りたいのはアクションなんだけど!?」

という方にも同様にこの二つのツールを勧めます。

 

何故かというと、

「変数」の概念を低いハードルで理解出来る

と思うからです。

両者ともにRPG製作界では有名なツールですので、講座系サイトやチュートリアルも非常に豊富。

ゲームなんて「変数」の概念を理解していないと、本当に何も作れません。

 

 特に「ウルフRPGエディター」は無料で公開されていますので、本当に初心者の方はこのツールに手を出す前に、予行演習としてそちらを先に触ってみる事を強くお勧めします。(より分かりやすいのは有料の「RPGツクール」ですけどね)

 

では結局CF2.5はお勧め出来ないの?という事になりますが、

 

「変数」くらいは理解出来てる。

とにかく型にはまらない自由なゲームを作れるなら努力は惜しまない!でもプログラム覚えるのはちょっと…ぼそぼそ

という方には強くお勧めできます!

テンプレートが無く、とっつきにくい分、自由度は抜群に高いです!!

 

1面は横スクロールACT、2面は縦シューティング、3面はアクションRPG、というような変態ゲームも理論上は作れます!やったことはないですが。

 

では一体そんな資料の少ないCF2.5で、どうやってやりたい動作を実現するのか?壁に行き詰った時どうするか?という事ですが、以下は実際に私がやっている事です。

ブロック崩しチュートリアルは作った上で)

 

①CF2.5wikiを読み漁る

CF2.5/CF2.5とは - Multimedia Fusion 2 Wiki*

拡張ツールの紹介や、テクニック集まで、初心者から上級者まで役に立つ情報が多いです。

 

②CF2.5(MMF2)の2chを、過去から現在まで洗いざらい読破する

これも、中には非常に有益な情報が含まれています。

数年前の記事の中にも、上級者の方がアップロードしたサンプルコードが未だ残っていたりします。

 

③「CF2.5」「MMF2」「インディゲームクリエーター」の3つのワードで検索。

出てきた個人サイトは全て読破する

自分の作りたいゲームに関係あるかどうか、なんてどうだっていいんです。

サイト主さんが何気なく書いていた言葉が、後になって開発のヒントになる事がザラにあります。

 

プログラミング言語の初心者向けサイトを読み漁る

これは、キャラクターの動きを研究する時に特に役立ちます。

C言語などはゲームプログラミング講座のようなサイトが非常に多いです。

数学や物理学の公式を使ってキャラクターを動かすようなケースは、考え方の基本は同じですので、他言語で書かれたソースコードを脳内で気合でCF2.5のGUI命令文に変換します。

トライ&エラーは避けられませんが、案外イケます。

 

 といったところでしょうか。

何よりも情報の少なさが最大のデメリットではありますが、その分必死で考えて作ったプログラムが思い通りに動いた時の感動は計りしれません!

ゲームを作る為のツール、ではありながらも

「ゲームを作る事自体を楽しめる」ツールでもあると感じます。

 

まあ、結局完成したゲームは一本も無いわけですが、私が理解出来た事はこのサイトを通じて、数少ない情報の一つとして公開していこうと考えております。

 

そして、CF2.5ユーザーが世に増え、その方達がまた情報サイトを立ち上げてくれればもっともっと自分は楽に学習出来ると…

 

そう、そんな打算の元にこのサイトを運用しております。

……盛り上がれ!CF2.5界! 

レビュー: CF2.5(インディゲームクリエーター)は本当に簡単にゲームが作れるのか!?

ここ数記事、動作の実装方法ばかり更新してきて、ほんのり疲れてきましたので、今回は雑記です。

*まだまだお伝え出来る物はあるのですが、そろそろ長大なイベント構造になってきているので、作るのに気合が必要…

 

このブログも途中長いブランクがあったものの、そろそろ100記事に到達出来そうなので、今回は改めて、CF2.5(インディゲームクリエーター)を触ってみての感想を書いてみたいと思います。

 

まず、今現在CF2.5を購入しようか迷っていて、ネット検索してこの記事に辿り着いた方の為に、管理人がどの程度このツールを触っているのかを書いておきます。

 

ツール使用期間(ブランクを除く)

→前作(MMF2)を含めて1年半程度

プログラミングの知識

→完全未経験素人

作成出来たもの

①触りだけですがフリーム!に投稿済み

②個人的に数秒程度のアニメーションを作成してイベントで放送

作った(作れた)ゲームのタイプ

→2D横スクロールアクション(ステージクリア制)バグ多(泣)

現時点の、CF2.5作成技術、知識

→初心者から中級者への過渡期…くらい?

 FCレベルの簡単なゲームならギリギリ自分で作れそうと錯覚出来るレベル

 

とまあ、こんなスペックの人間の感想である事を前提にしてください。

こんなブログを読んで下さる時点でCF2.5の最低限の事はご存知だと思うので、そのあたりの説明は省きます。

それでは以下本文です

 

本当に何の知識もなくてもゲームを作れるのか?

結論から言います。

同梱のチュートリアル(簡易ブロック崩し)と同じゲームなら簡単に作れます。

多分、今貴方が頭に思い描いているゲームはそう簡単には作れません。

はい、本当にこれに尽きると思います。

 

ではそれぞれの理由ですが、

何故チュートリアルなら「簡単に」作れるというのか、というと

CF2.5がGUI(グラフィックユーザインターフェース)を採用しており、

何をしようとしているか、何を計算しようとしているのか?が分かりやすい事が挙げられます。

f:id:vobo:20170730222356g:plain

 これはプレーヤーが発射した弾が敵(トマトみたいなアイコン)に当たったら弾を消して、敵に1ダメージを与える。

2行目で敵のライフが0になったら消滅する、という私の作ったプログラムです。

読むだけで何となくやってる事が分かると思います。

これを元々備わっている定型文 の組み合わせで作ってやるので、プログラミングのように、スペルミスでエラー、という事もありません。

変数名にも自由に日本語で名前をつけられますので、可読性も比較的高いですね。

 

これが「簡単に」作れるといった理由です。要は、

「こうゆうプログラムをすればこんな動作をして、こんなゲームを作れますよ!」

と、答えが分かっていてやる分には非常に簡単にゲームを作れる

という事です。

プログラミングのように、その言語特有の記述方法などを一から学ぶ必要はありません。

 

逆に言えば、答えが分からない状況で一から作ろうとするなら

プログラミング程では無いにせよ、難易度は劇的に上昇します。

 

上に貼った画像で分かるように、このツールには、「攻撃力」のようなステータスや、敵に弾が当たったら設定した数字分のHPが減る、というような、所謂テンプレート的な物はほぼ有りません。

つまり、そのレベルで一から全部自作する事が必要という事です。

 

 「いや、それくらい説明書とか、ネットで拾ったりして調べりゃいいんじゃね?」

 

と思う方も多いと思いますが、ここに落とし穴が有ります。

そう、

情報が余りにも少ないのです

 

リテラシー能力が…などという以前に、そもそも検索にヒットしません。

ツール自体にチュートリアルやヘルプも付いてはいますが、出てくる言葉の概念自体を理解していないと、ハッキリ言ってヘルプは余り役には立ちません。

チュートリアルをやって理解出来るのは『ブロック崩し』の作り方だけです。

 

多分、このツールを買おうか迷っている方の大半は、

「2Dアクション」「アクションRPG」「シューティング」などの、比較的自由度の高い(テンプレの少ない)ジャンルのゲームを作りたい方だと思います。

が、

作る為の教材、素材は雀の涙程しか世にありません

*ですが、現在ネット上にある教材はいずれも非常に質の良い物ばかりだとは思います。単純にユーザー数が少ないのか、種類と数が追いついておらんのです…

 

そうなんです。

これが、このツールを買ってすぐに「俺の考えた最強のゲーム」が作れない、という一番の理由です。

そして、このツールを1年程使って、未だに実感している短所です。

 

またまた長くなってしまったので、2回に分けたいと思います。

次回は、じゃあ一体どうやって凝った物を作ればいいのか?を中心に考えを述べたいと思います。 

色々な円運動②sin波 cos波

 今回は少しでも記事から動きをイメージしやすくする為、

初めてGIF動画を取り入れてみました。

重くて見れねーよ!とか、

動作してねーよ!タコが!

とかありましたらコメントで教えて頂きたいです…

 

というわけで、今回も円動作の応用編です。

早速ですが先ずは↓↓↓のGIF動画をご覧下さい。

 

f:id:vobo:20170728014639g:plain

「あっ、よくある動く床的な奴やん」

と思ってくれたら幸いです。

そう、この動きも三角関数を使って、円動作の応用で作られています。

 それでは具体的なイベント内容です。

f:id:vobo:20170728015440p:plain

はい、これだけです。

 

 

もう気づかれた方もいらっしゃると思いますが、これって正円を描く動作から、X軸方向の移動(cos)に関するイベントを除いただけなんですね。

f:id:vobo:20170728015909p:plain

↑↑↑が正円を描くイベントでした。

そう、円動作から、「X軸」が関わるイベントを取り除くと、動画のような、上下に滑らかに動く動作に変換できるんですね。

 

理屈を説明しますと、

f:id:vobo:20170728020549g:plain

例えば半径が100ピクセルの円を描くイベントを想定した場合、中心座標が0だとすると、「Y座標」の値は、角度が0°から360°に動くに伴って、最大100、最小ー100の間を推移しますよね。

 

この、角度がθとした時、「Y座標」のとる値(=sinθ)だけで構成した動作を『sin波』と呼ぶようですね。

 

難しそうに見えて、実は円を描くより簡単にイベントを作れるってあたりが素敵ですね。

 

で、同じ考え方で、今度は左右に滑らかに動く『cos波』というものがあるのですが、これはもうお察しの通り、円動作から「Y軸」のイベントを削除して、「X座標」の推移のみに絞った物になります。

f:id:vobo:20170728021222p:plain

 これはイベントのみ載せておきます。

 

この動きは結構色々と使えそうです♪

例えば、sin波の動作に、

『条件:常に実行

 動作:オブジェクトのX座標を「オブジェクトのX座標」マイナス1に変更』

という条件文を足してみるとこんな動きに

f:id:vobo:20170728022743g:plain

 おじさん世代垂涎のあのゲーム風の動きですね。

(これで分かってもらえるととても喜びます)

それでは今回はこの辺で。 

色々な円運動① 楕円形動作

折角三角関数も覚えた事なので、この機に今まで避けていたプチ物理動作を学んでおり、肝心の製作は全く進んでいない私です。

 

今回は、以前ご紹介した円運動イベントの進化版です。

以前の記事を読まれておらず、CF2.5で作る円運動に関して良く分かっていない、という方は円運動の基礎講座から読まれる事をお勧めします

 

vobo.hatenadiary.jp

半径自動計算+楕円作成+回転方向変換機能付きイベント

まずイベント構成がこれで

f:id:vobo:20170725013609j:plain

変数構成がこんな感じです

f:id:vobo:20170725014135j:plain

 これでどんな機能を実装しているかというと、

f:id:vobo:20170725014504g:plain

①ドラッグ&ドロップで適当に配置した回転オブジェクトと中心点の距離を自動で計算して、それを半径とした円運動を実現。

(要は視覚的に円の大きさを設定出来るというメリットがあります

これは前回の円動作講座④で解説したのと同じものです。)

 

vobo.hatenadiary.jp

②変数(回転方向)に「1」又は「-1」を代入してやる事で、右回り、左回りを自動で切り替えできます。

(1の場合は右回り、-1の場合は左回りに回転します)

 

③変数「左右伸び率」、「上下伸び率」に任意の数字を代入する事で、X軸方向、又はY軸方向の半径のみを拡張した、楕円運動を実現する事が出来ます。

 

ここからは具体的な解説です。

円運動自体の解説はリンクしてある以前の記事をご参照頂き、ここでは追加部分のみの説明となります。

 

まずは上記②回転方向を変数で選択してやる、というものですが、

sin、cosを求める為の変数(角度θ)に、回転速度を加算する事で右回り、減算する事で左回りに運動する、という事を利用したものです。

回転速度に1を乗する事で正の数を、-1を乗する事で負の数を加算(マイナスする)する事が出来るわけですね。

 

…もうお気づきの方もいらっしゃると思いますが、正直こんな変数使わなくても、

変数(回転速度)にマイナスの数字を代入してやるだけで実現出来るんですけどね。

でもまあ、触りたての時って、慣れれば当たり前の事も思いつかなかったりするわけで、あくまで誰でも使える汎用的なイベントの為に作った変数です、というわけでご理解を。

 

 

続いて③、楕円形運動の部分です。

ここの計算部分を拡大してみます。

f:id:vobo:20170725021625j:plain

変数(左右伸び率)で横方向の移動量(コサイン)を、変数(上下伸び率)で縦方向の移動量(サイン)をそれぞれ変化させる式である事が分かると思います。

 

そう、楕円形円動作のポイントは、サインとコサイン、

どちらかだけの数字を変化させる

事で実現する事が出来ます。

 

例えば、左右伸び率に2を代入、上下伸び率を1のままにして実行するとどうなるかというと、どちらも1を代入した真円に比べて、

f:id:vobo:20170725023146g:plain

*今回は軌道を分かりやすくする為、残像を付けてみました 

f:id:vobo:20170725023329g:plain

少し分かりにくいですが、軌道が横長に変形します。

では、左右伸び率に0.5を代入するとどうなるか?

代入前よりコサインの数字が小さくなるわけですから、

f:id:vobo:20170725024221g:plain

こんな感じに、縦方向の長さは変わらず、左右の長さが短くなり、結果的に縦長の楕円を描く動きに変わります。

変数(上下伸び率)も、全く同じように、任意の数字を代入する事で、こちらは上下の長さを変更する事で楕円の軌道を描く事が出来ます。

 

以上で解説は終わりです。

あらゆる円動作の雛形として、一家に一台いかがでしょうか?

シューティングゲームで、自機の周囲を回転しているオプションの軌道を任意で変形させる、なんて動作に使える!かもしれません。

それでは今回はこのへんで。 

自機狙い弾の作り方

ふと気づいたらこのブログを見ていた嫁(ゲームやプログラミングに一切興味無し)が、CF2.5を「シトラスック2.5」と読んでいました。

一体何を食って育ってきたらそう読めるようになるのか…

 

というわけで、あいも変わらずチマチマと敵性MOBを作りながら、

寄り道しております。

ですが寄り道のお陰で幾つか共有出来る技術が出て来ましたので紹介を。

 

先ずは自機狙い弾でございます。

 

 

自機狙い弾のイベント設定

f:id:vobo:20170722223014g:plain

こういう奴ですね。

敵MOBがプレーヤーのいる方向に弾を撃ってくる動作です。

(ホーミングではなく、発射時に一度だけプレーヤーのいる方向を計算して撃ってくる動作)

先にお断りをしておくと、この内容は、某有名講座で紹介されていた方法に自分なりの改変を加え、解説をしたものとなります。

それでは具体的なイベント解説です。

 

f:id:vobo:20170722224758g:plain

フレーム画面はこんな感じです。

0.5秒毎に、敵からプレーヤー(猫)に向かって弾が発射される、というイベントを組んであります。

(この条件は何でも自由に設定しましょう!)

 

f:id:vobo:20170722225146j:plain

「発射」ではなく、「オブジェクトを作成」を選びましょう。

f:id:vobo:20170722225452p:plain

で、これが作成された弾自体がプレーヤーの方向へ飛んでくるイベントになります。

前提として、

変数(移動速度(半径))=30を代入しています。

内部フラグ0=弾オブジェクトが敵の位置に作成されたらフラグが無効のイベントが実行。その直後にフラグが有効に切り替わり、以降、「フラグ0が有効」で定義されたイベントが実行され続ける、という構造になっています。

 

それでは弾の移動アルゴリズムの解説です。

ざっくり言うと、自機狙いの動作は「三角関数」の公式を用いて動かします。

必要な予備知識は、「sin=サイン」「cos=コサイン」「atan=アークタンジェント」の3つです。

*この3つは当ブログでも、前記事で解説しておりますし、他所サイト様でも分かりやすい解説が豊富にありますので、未見の方は予習される事をお勧めします!

CF2.5 三角関数を使った自力!円運動講座 ② - 自作ゲームの大福島

 

f:id:vobo:20170722230405j:plain

変数(次のX座標)、変数(次のY座標)は、

弾が1フレーム後にいるはずの座標を格納します。

弾が敵オブジェクトの位置に作成されたばかりの時ですから、作成された瞬間の弾の位置を記録させてやりましょう。

 

 次の行では、

変数(主人公のいる角度)に、アークタンジェント関数を使って敵とプレーヤーとの角度を代入してやります。

 角度を求め終わったら、弾の初期設定は完了です。

内部フラグ0を有効に切り替えて、移動イベントに移行します。

 

f:id:vobo:20170722231152j:plain

 後半のイベントでは、最初に設定した移動速度と角度を使って、フレーム毎にX座標、Y座標の位置を割り出します。

f:id:vobo:20170722232020g:plain

イメージ図です。(わかりやす…いのか?)

三角形の斜辺が1フレーム毎に30ピクセル分進みます、

それに対する横と縦の比率がそれぞれCOS(横)、SIN(縦)でしたね。

ですので、1フレーム後に弾があるべき座標はそれぞれ、

X軸=移動速度(=30)×cos

Y軸=移動速度(=30)×sin としてやる事で、実際の移動距離が出せますね!

後はこれを現在の弾のX軸、Y軸の座標に加算してあげる事で、1フレーム後にあるべき座標に移動し続ける事が出来るわけです。

これで自機狙い弾の完成です。

一つ雛形を作っておけば、クローンを使って様々なデザインに変更して活用出来ると思います。

また、プレーヤーのいる方向に向かって突撃してくる敵、などにも応用出来ますね。

 

 

ちなみに、プレーヤーのいる角度を求めるイベントを「常に実行」してやると、

f:id:vobo:20170722233309j:plain

f:id:vobo:20170722233052g:plain

死ぬまで追い続ける永久ホーミング弾が完成します。

 

何これコワイ

CF2.5 三角関数を使った自力!円運動講座 ④

さあ今回でようやくこの講座も最終回で御座います。

今回は、円運動イベントの発展系のご紹介です。

是非実際に組んでみたって下さい

 

 

左回りの円運動

 

f:id:vobo:20170717223038g:plain

これは簡単。角度θに回転速度を加算ではなく減算させてやります。

以上!

 

 

円運動の中心点を動かす処理

これも理屈が分かれば簡単ですね!

f:id:vobo:20170717223451g:plain

ポイントは二つです。

①中心点の座標計算を「常に実行」で常時計算する事

②中心点オブジェクトに動作設定をしてやる事

 

今回は、中心点オブジェクトが、マウスカーソルの位置に同期するように設定しています。つまり、マウスカーソルを中心に円運動が発生するようになります。

これをプレーヤーオブジェクトに同期させてやれば、シューティングゲームのオプションのような動きが実現できますね!

 

円運動の半径を自動計算する処理

まずどんな処理なのか、という事ですが、

f:id:vobo:20170717224919g:plain

適当な座標にドラッグした回転オブジェクトと中心点の距離を自動計算し、円の半径を自動で計算するという処理になります。

今までのプログラムでは常に半径を前もって代入しなくてはなりませんでしたが、この処理を使うと、より視覚的に半径を設定してやる事が出来ます。

ではイベント内容を見てみます。

f:id:vobo:20170717225243g:plain

 

 

 

…何いってんだこいつ?

          /     \
     /   ⌒  ⌒ \   
   /    ()  () \
    |   、" ゙)(__人__)"  )    ___________
   \      。` ⌒゚:j´ ,/ j゙~~| | |             |
__/          \  |__| | |             |
| | /   ,              \n||  | |             |
| | /   /         r.  ( こ) | |             |
| | | ⌒ ーnnn        |\ (⊆ソ .|_|___________|
 ̄ \__、("二) ̄ ̄ ̄ ̄ ̄l二二l二二  _|_|__|_

 

となった方もいらっしゃるかもしれません…

ですが、寧ろこのイベントの為にこの回を作ったといっても過言ではありません!

しばし辛抱です。

 

まず、このイベントの為に二つの変数を追加しました。

 

・変数(アークタンジェントθ)…中心点から回転オブジェクトを結ぶ直線への角度を代入します

・変数(cosθ)…円の角度θに対するcosの数字を代入します。

 

次に、このイベントを理解する為に、次の二つのポイントを抑えましょう

 

・斜辺θの長さを計算する時は、底辺÷cosθで計算出来る

*底辺の長さ=cosθ×半径(斜辺の長さ) で計算しましたね!

→斜辺の長さ=底辺の長さ÷cosθ   という、単純な方程式の考え方です

 

・アークタンジェントθとは、底辺の長さと縦の長さから、角度を求める関数です

 

f:id:vobo:20170718073447g:plain

図で見ると、赤の線の長さ(回転オブジェクトと中心点のY軸ピクセル差異)と緑の線の長さ(回転オブジェクトと中心点のX軸ピクセル差異)を渡してやる事で、紫の線(円の半径)に生じる角度を計算してくれます。

 

X軸、Y軸それぞれの座標距離を求めるには、片方から片方のX位置、Y位置を引いてやればOKです。

f:id:vobo:20170718073935g:plain

「特別」→「サインおよびコサイン」→「y/xのアークタンジェント」を選びましょう。

f:id:vobo:20170718074219g:plain

こんな感じで、Y軸入力部分、X軸入力部分それぞれに、回転オブジェクトのY座標から中心点オブジェクトのY座標を減算してください。

 こうする事で、イベント行1行目で変数(アークタンジェントθ)には、中心点とオブジェクトの角度が入力された状態になりました。

 

次にイベント2行目を見てみましょう

ここでは後のイベントを分かりやすくする為、一度コサインの値を変数に格納しています。

コサインを計算する為には、角度が必要でしたね。今回必要な角度は、変数(アークタンジェントθ)に格納してありますから、

cos(変数(アークタンジェントθ) )と入力してやる事で、角度θのCOS(斜辺に対する長さの比率)が計算出来ました!

3行目でいよいよ斜辺の長さを計算します。

f:id:vobo:20170717225243g:plain

 3行目では、先述の、「X軸の距離=底辺の長さ」を「cosθ(比率)」で割り算してやる事で、斜辺の長さを計算。

その結果を変数(円の半径(斜辺の長さ) )に代入しています。

さあ、これでようやく、適当に設置したオブジェクトと中心点の角度、半径を自動計算出来ました。後は通常通りの処理が行われているだけです。

f:id:vobo:20170718075636g:plain

動いた!ハッピー!!

 

という事で、見た目の距離を半径として円を描くイベントを組む事が出来ました。

半径が長くなればなる程見た目の回転スピードは速くなりますので、速度の調整は必要ですが、この組み方をすれば、

「半径の異なる同心円を描くオブジェクトが大量に必要」というシチュエーションに役立つ。かもしれない…

 

 

何よりも、今回ご説明したアークタンジェント(愛称、あーたん♪)関数は、自機狙い弾や、プレーヤーのいる方向に回転し続けるオブジェクト、などのイベントに非常に応用が利く関数です。

少しでも理解の助けになっていれば幸いです。

 

 

 

 

長くなりましたが、4回に渡る三角関数講座もようやく終了です。

拙い説明だったと思いますが、最後まで読んでくださった方はありがとう御座います。

 …ところで、一つ気づきませんでしたか?

 

ちょっとだけ三角関数の事を好きになっていた事に

f:id:vobo:20170718082302g:plain

だがタンジェント。お前は駄目だ。

CF2.5 三角関数を使った自力!円運動講座 ③

さあ、今回はCF2.5での具体的なイベント作成の解説です。

f:id:vobo:20170715012923g:plain

f:id:vobo:20170715013545g:plain

使用するオブジェクト変数と意味は以下の通りです。

 

・中心点のX座標…その名の通り円運動の中心となるX座標を定義します。

・中心点のY座標…円運動の中心となるY座標を定義します。

・円の半径(斜辺の長さ)…中心点から回転オブジェクトまでの距離を定義します。

例えば100を代入すれば、半径100ピクセルの等心円を描きます

・角度θ…中心点から回転オブジェクトまでの直線(半径)を繋ぐ角度です。

0からスタートし、360°まで増加させます

・回転速度…1フレームに計算する角度の数です。例えば10を代入した場合、1フレーム目は0°の位置、2フレーム目は10°の時のオブジェクトの座標を計算します。

当然ですが、この数字を上げる程、見た目の回転の早くなります。

 

ではイベント解説です。

前提として、変数(円の半径)に100、変数(回転速度)に1を代入します。

 

「フレームが開始」

・まずは円運動の中心となる座標を定義します。その為に変数(中心点のX(Y)座標)に、中心点オブジェクトの位置を代入します。

 

「常に実行」

・ここで半径に対するsin、cosを使って回転オブジェクトの座標を計算していきます。

前回の講座内容より、半径(斜辺の長さ)にcosをかけた物がオブジェクトのX座標、

半径(斜辺の長さ)にsinをかけた物がオブジェクトのY座標であるという事が分かりましたので、1フレーム毎に位置を変更していくわけです。

ちなみに、中心点の○座標に移動距離を加算する形をとっていますが、この計算を入れないと、

 

f:id:vobo:20170717124830g:plain

このように、CF2.5の画面左上端を中心とした円運動に変更されてしまいますので注意が必要です。

CF2.5では左上端が(Y,X)=(0,0)だからです。

 

 そして最後に、次のフレームで計算する角度を変更してやるイベントを組みます。

今回の場合は、

変数(角度θ)に変数(回転速度=5)を追加してやります。

こうする事で、毎フレーム5°ずつ回転するオブジェクトの完成です!

いかがでしょう。動きましたでしょうか?

それでは角度の計算に関して補足です。

 

角度θを360°周期で0に戻すには?

このプログラムでは、問題なく円運動は出来るものの、角度θの変数を見てみると、

360°を超えても400~500と無限に増えていってしまっているのが分かると思います。

永遠に加算し続けるわけですからそらそうですよね。

これをきっちり360°に到達したら再び0°に戻すには以下のように組んで見て下さい。

f:id:vobo:20170717171423g:plain

f:id:vobo:20170717171629g:plain

ポイントは『mod』という関数です。

数字①mod数字② と記述する事で、「数字①を数字②で割った時の余りを返す」関数です。

 重要なのは、

数字①より数字②が大きい場合は計算されない

 という点です。

つまり今回の場合は、角度θが0からスタートしますから、

 当然0を360で割る事が出来ず、mod360の部分は無視され、回転速度5が加算されるのみとなります。

で、次のフレームでどう計算されるかというと、

『5mod360+5』という公式になります。

今回も5を360で割れませんから、無視。『5+5』というシンプルな公式となり、次のフレームでの角度θの値は10となるわけです。

もうお察しの通り、360°に達するまで、5ずつ角度が増えていき、円運動が一周する360に達した瞬間、360÷360=余り0となり、再び0°からの計算に戻してくれます。

 

このmod関数、地味に便利です!

応用として、例えばタイマーを用いずに、変数で~秒毎に△△する、というイベントを組むときに、

 

・常に実行  変数Aを 『変数Amod100+1』 に変更

・変数Aが100になった時  ○○○を発射

 

このような形にしてやると、たった2行で変数タイマーの完成です!!

わざわざ「変数Aが100になったらイベントを行って、変数Aを一旦0に戻して…」

とまだるっこしい計算をする必要が無くなります。

神ってる!mod先輩神ってる!!

 

 

長くなりましたが、以上が円運動イベントの基本形の解説で御座いました。

まだ気力があれば、次回は円運動の発展系イベントの組み方解説をやってみようと思います。

CF2.5 三角関数を使った自力!円運動講座 ②

 

初めに。

この講座はあくまでCF2.5で三角関数を扱う際に理解を深める為の物で御座います。

数学的に正しい情報では間違っても御座いませんので、正式な三角関数の知識が必要な方は間違っても当講座を参照されないようにご注意下さいませ。

 

 

 

前回の続きです。

前回で、円運動には三角形の角度と辺の長さを計算してやる必要があるよ、という事まで説明致しました。

今回は、本題である三角関数を使って実際に座標計算してやるところまで行こうと思いますよ!

図で確認しておきましょう。

f:id:vobo:20170714115058p:plain

オブジェクトを既成の動作を使わず移動させる為には、常に「移動先の座標」を計算してやる事が必要になるわけですが、円運動に於いては、

中心点を起点とした三角形の、底辺の長さがX座標

縦に伸びる辺の長さがY座標

と言えます。

 たとえば、上の図の中心点が(Y、X)=(0,0)だとして、底辺が10ピクセル、縦の辺が6ピクセルだとしたら、オブジェクトの座標は(-6、-10)の位置にあるという事です。

で、今の三角形の中心の角度が220°だと仮定しますと、次のフレームで221°になった時、底辺、縦辺の長さがどうなるか、を計算していくわけですね。

 

ここでいよいよ三角関数が出てきます。

f:id:vobo:20170714123437p:plain

懐かしいこれです。超ざっくり説明しますと、

中心角がθ°だった際の斜辺の長さが「1」だった時の、縦の辺の長さ比率=sinθ

底辺の長さ比率=cosθ

 

 例えば、斜辺の長さが10ピクセル。角度θが40°だった時、斜辺に対する比率である

sinθ=0.4 cosθ=0.9 といった感じに、斜辺に対する比率を返すのがCF2.5における三角関数です。(数字は全く正しくありませんので悪しからず)

なので実際に数字を代入してみると、以下のようになりますね。

f:id:vobo:20170715012351p:plain

比率から具体的な数字を出す為には、角度θ(40°)の中心座標が0.0だとすると、

sinθ(比率)×斜辺=0.4×10=4→Y座標は-4

cosθ(比率)×斜辺=0.9×10=9→X座標はー9

という風に、具体的な座標を求める事が出来るわけです。

 

 

では、具体的にCF2.5で円動作を実現する為に、どんなイベントが必要なのかを見てみます。 

f:id:vobo:20170715012923g:plain

上記画像で、■を中心として、緑のオブジェクトが一定速度で回転し続けるイベントをシンプルな形で組んだものが以下になります。

f:id:vobo:20170715013545g:plain

 こいつを実行すると、一定速度で■の周りをオブジェクトが右回りに回転し続ける動作の完成です。もうこの段階で全てを理解された方もいらっしゃると思います。

次回は、イベントの詳細な解説と、発展系(中心点を自由に動かしたり、逆周りの動作をさせたり、角度の変数を操作したり…といったイベント)の解説を出来れば、と思います。

 

サクサク解説まで完了出来ればいいのですが、思っていた以上に時間がかかりますね…

それではまた近い内に更新出来るように致します!

 

CF2.5 三角関数を使った自力!円運動講座

おまえと…おまえとだけは戦いたくなかった…。

 

そう。

 

三角関数

 

 

*本文下部に、エクステンション無し、三角関数を用いた、「円動作」の作り方解説が御座います。面倒な方は下段までスクロールして下さい*

 

 

 

先日、あいも変わらず敵AIを作成していた時の事ですが、

自機狙いの弾を発射する敵MOBを作成する際、今までなら「オブジェクトの方向に発射」という便利な既成イベントを使用していたのですが、ふっ と思いつきで

「『オブジェクトを発射』を使用するイベントはバグや制約が多いと聞く。なら自作でイベントを組んでみるか…」

と思い立ってしまったのが運のつき。

そこから、深くて長い、おまけに暗い「三角関数」のトンネルに入ってしまったのです。…

 

当然のごとく組み方を思いつかなかった私は、某サイトの自機狙い弾の作成講座を参考に、とりあえず教えられるがまま、イベント自体は組めるようになりました。

そこで、このような動作は三角関数の使用が必要という事が判明。

(講座の作成主様はどうやらその講座へのリンク、拡散を望んではおられないようですので、当サイトからのリンクや、タイトル名の公表は控えさせて頂きます。ごめんなさい)

 

 

ですが、ヘタレのくせに負けず嫌いなワタクシは、気の迷いから、「どうせやるなら

三角関数をこの機にマスターしたろやないかい!」と考えてしまったわけですね。

どうすんだ。高校時代数学の成績5段階中1だったくせに。テストで0点を2回とったくせに。

 

というわけで、無い頭を振り絞り、様々な先人の知恵をお借りし(開発言語での講座も参考にしつつ)、何とか自分自身の頭で最低限理解出来るようになりましたので、同じ悩みを持つCF2.5ユーザーの方に共有です。

今回は「円運動」です。ベクター動作で簡単に出来るじゃん。というのは無しで。

自機狙い弾は割りと講座が有名なので、知っている方も多いだろう、という事で

円動作の解説で御座います。

 

 

CF2.5での円運動の作り方

f:id:vobo:20170714025449p:plain

ここで言う円運動とは、『ある座標を中心に、360°オブジェクトが回転する動作』 を指します。この『360°』というのがポイントです。

f:id:vobo:20170714030143p:plain

少し見方を変えてみると、円運動とは、「オブジェクトがくっついた○○ピクセル分の長さの棒が、360°回転する動作」と言えます。

 更に言い換えれば、棒の長さ=円の半径である、と言えますね。

 次に、「角度」という言葉が出てきましたので、円運動における角度を図に表してみます。

 

f:id:vobo:20170714032453p:plain

 勿論左右がX軸、上下がY軸。線が交わる点が、円運動の中心座標と考えて下さい。

f:id:vobo:20170714033352p:plain

続いて、先ほどの画像に、円運動するオブジェクトと、半径、角度の関係を重ねてみました。

……これって何かで見たような

 

f:id:vobo:20170714033744p:plain

あっっ!!(察し)

 

 

そうです。

これって、数学の授業で見た、あの忌まわしき

直角三角形

になってるんですね。

つまり、円運動というのは

f:id:vobo:20170714034657p:plain

『直角三角形の斜辺を半径として、オブジェクトのXY座標が、360°移動する』

というプログラムになるわけです。

f:id:vobo:20170714035718p:plain

こんな感じで動いていくわけですね。

つまり、オブジェクトを円運動させるためには

 

直角三角形の辺の長さを用いてオブジェクトのXY座標を求め続ける必要があるわけです。

 

…ああ、長い。

次回は実際のイベント講座まで進めたいと思います。

続く!と思います…

 

自作タイトルとコンセプトとか

さてまだまだ自作ゲー製作は目下敵AIを作成中です。

知識は以前よりも増えたつもりではありますが、やっぱり動作部分で難航しております…。

いや本当、プロの作った既成のゲームって良く出来てんな、と頻繁に思います。。。

 

今回の作成中ゲームのタイトルは

『ReCambria』

でいこうと考えております。

Cambria=カンブリア紀 カンブリア大爆発、のカンブリアです。

意味は文法無視で、「二発目のカンブリア紀だよ!」的な意味を持たせています。

うっすい知識で平たく言えば、カンブリア大爆発とは古代 、現代生物の始祖となる種が爆発的に増えた(特に変わった見た目の生き物が)時代を意味します。

不思議生物好きとしては非常にロマン溢れる時代です。

 

ゲームのコンセプトは『多様性』

 

タイトルまんま、ですが、

人類や既存の生物がいなくなった後の世界で、多種多様な生物が一斉に進化、生存競争を繰り広げる中を、多様な生物の一匹が冒険するというストーリーを考えています。

(今回は主人公は猫でなく)

若干最近プレイしたゲームに影響を受けている気がしますが、気のせいです…

 

 

とにかく出現するクリーチャー達に姿形、習性に多様性をもたせる事で、サファリパークを散歩するような、レベルデザインの妙を楽しむのとはまた別の面白みを出せたらいいなあと思っております。

草食動物、肉食動物、植物、多種多様な生物が相互に関係しあう様を描きたい…と思っています。

まあ、あんまり高度な目標を持ちすぎるとエターナりますので、とりあえず、「動くクリーチャーを一杯作る!」というシンプルな目標を立てています。

数こなす事で、勉強にもなりますしね。

  

f:id:vobo:20170711003111g:plain

 という事で、適当なグラフィックを当てて毎日AI作成。

出来る事も、学べた知識も限られてるんですが、少しでも生き物っぽく動くよう試行錯誤しております。

その進度たるや亀の如し。

元から絵を描くのは好きでしたので、グラフィックから入ると確実に自己満足してしまうのが分かっていますから、今はシステム作成のみに集中…辛い。

 まだまだ道のりは長いですが、少しずつ作り上げていこうと思います。