投稿

マウスオーバーできるボタンの作り方

イメージ
基本的なことなのに意外とボタンの作り方って情報が少ないので、私流の方法ですが作り方を紹介します第二弾。 シンプルな第一弾はこちら↓ 「 シンプルなボタンの作り方 」 PC 向け:マウスオーバーできるボタンの作り方 マウスが重なったり押している時に画像が変わる、よくある感じのボタンの作り方です。 1. スプライトを用意する ボタン用のスプライトオブジェクトを作ります。 このスプライトには、通常時の「normal」と、マウスオーバー時の「hover」、押したときの「press」というアニメーションを設定します。 2. シーンに配置する ぽいっとする。 3. イベントを組む たかだかボタン 1 つ作るだけで 4 つもイベント作らなければいけないので、まあまあ手間ですw イベントを 1 つずつ順に説明します。 1 つ目のイベントは、条件がないので毎フレーム実行されます。 ここでは、毎回ボタンのアニメーションを「normal」に戻しています。 2 つ目のイベントで、マウスカーソルが重なっているときの動作を設定しています。 条件でマウスカーソルがボタンの上にあるかをチェックして、マウスカーソルが上にある場合は、そのボタンのアニメーションを「hover」に変更します。 さらに以下のサブイベントが、そのボタンのみを対象として実行されます。 3 つ目のイベントでは、ボタンが押し込まれているときの動作を設定しています。 マウスボタン(左クリックが指定されています)が押されているかチェックして、押されているならボタンのアニメーションを「press」に変更します。 4 つ目のイベントで、ようやくクリックしたときの動作を設定します。 マウスボタン(左クリックが指定されています)が放されたかチェックして、放されたならアクションを実行します。(ここではゲームを終了する) ボタンの機能によっては、3 つ目の時点で目的のアクションを実行しても良いですが、その場合は押している間ずっと実行されないようにする工夫も、必要になるかもしれません。 たくさん作るの大変……そんな時は! 上記のタイプのボタンは押してる感があって良いのですが、ボタン 1 つにつき 4 つもイベントを作らなければならないので、たくさんのボタンが有るシーンを作りたいときは、このままではかなり面倒くさいことになります。 そんな時は、オブジ

シンプルなボタンの作り方

イメージ
基本的なことなのに意外とボタンの作り方って情報が少ないので、私流の方法ですが作り方を紹介します。 ここでは、クリックするとアクションするだけの、最も単純なボタンの作り方を紹介します。 もう少し手の込んだボタンが作成したい場合は「 マウスオーバーできるボタンの作り方 」をご覧ください。 1. スプライトを用意する ボタン用のオブジェクトには、主にスプライトオブジェクトかパネルスプライト(9パッチ)が利用されます。 用意できたらシーンに配置しましょう。 2. イベントを組む 「マウスボタンを放した直後」と「カーソル/タッチはオブジェクト上にある」の条件を組み合わせて、イベントを作りましょう。 ↓この条件と、 ↓この条件を使って、 ↓こんな感じにします(雑w) この例では、ボタンをクリックするとシーンの背景色が変わります。 ポイントは、マウスを押しているかチェックしてから、サブイベントでどのボタンの上にカーソルがあるかをチェックしている点です。 ↓下の画像のように個別にチェックしても機能しますが、複数のボタンがあるシーンでは、先の例に比べると無駄な処理が発生してしまいます。(同じチェックを繰り返しています) サブイベントを利用して、効率よく処理できるように組みましょう😉 おしまい!

Linux 版の GDevelop を使ってみた

イメージ
ひょんなことから Linux を使う機会があったので Linux 版の GDevelop を動かしてみました。 使用したディストリビューションは Ubuntu Desktop 20.04.2.0 LTS です。 まずはサイトから GDevelop をダウンロード。 LINUX ボタンに触れると表示される通り、ダウンロードするファイルは AppImage 形式です。 なので、Ubuntu 以外のディストリビューションでも動くはずです。 あとはダウンロードしたファイルに実行権限を付与すれば、起動できるようになります。 起動後はいつもどおりです😉 カンタン❗おしまい‼

リンクオブジェクトの使い方

イメージ
リンクオブジェクト機能を使えば、あるオブジェクトから、別のオブジェクトを参照することができるようになります。 っと言われても、ナンノコッチャ🤔かと思うので、例をあげて説明します。 ※ ちなみに少しまぎらわしいのですが、「リンク」というオブジェクトがあるわけではなく、オブジェクト同士をリンクする機能のことを「リンクオブジェクト」といいます。 また、正確には「オブジェクト間をリンクできる」のではなく「異なるオブジェクトのインスタンス間をリンクできる」です。(ヤヤコシスギルワー😫) リンクしたオブジェクトにだけアクションできる 例えば、こんな事ができます。 画面下の黄色ボタンをクリックすると、リンクした船 だけ が沈みます。 ポイントは、 沈むのは全ての船ではなくリンクしている船だけ 、という点です。 これは画像に書かれているように、それぞれの黄色ボタンと船が、リンクオブジェクト機能でリンクしているからです。 このように、同じオブジェクトから作られたインスタンスが複数あっても、リンクオブジェクト機能を使えば、リンクしたインスタンスのみに絞り込んでアクションを実行することができます。 では、具体的にどのように作られているのか見てみましょう。 エディター上のシーン ↓シーンはこんな感じです。 普通(?)に海の上に船があって、下に黒帯が置いてあるだけです。 黄色ボタンが置かれていない理由は、次のイベントのところで説明します。 ボタンを生成してリンクするイベント ↓このシーンのイベントは、この様になっています。 まずシーンが始まった時に、船の下の方に黄色ボタンを生成して、船と黄色ボタンをリンクしています。 ポイントは、「船のインスタンスごとに繰り返す」を使用している点です。 繰り返しを使用しないと、最初の船とリンクしたボタンが 1 つ生成されるだけになってしまいます。 また、イベントで黄色ボタンを生成することで、リンク先の黄色ボタンを絞り込む手間を省いています。 これが、シーンエディター上でボタンを置いていなかった理由です。 もし、シーンエディター上で予めボタンを置いておく必要がある場合は、どの船とどのボタンをリンクするか絞り込んでからリンクする、というちょっと面倒くさいイベントにする必要があります。 シーンエディター上で、リンクを定義する機能があれば良いんです

タイルスプライトで作る流れる背景

イメージ
同じ画像をタイルのように敷き詰めたい時に便利なタイルスプライトオブジェクトを利用して、流れる背景の作り方を紹介します。 こういうのです↓ 超簡単にできるのに、これだけで背景に動きが出ておしゃれ(?)になるので、おすすめです😉 なお、似たようなオブジェクトで「タイルマップ (Tilemap)」オブジェクトというものもありますが、ここで使用するのは「タイルスプライト」オブジェクトなので、間違えないように注意してください。 手順その1 タイルスプライトを追加する 敷き詰めたい画像を使用して、タイルスプライトを用意しましょう。 例えば↑この画像を使って↓こんな感じです。 タイルスプライトが用意できたら、シーンへ追加して必要な大きさに引き伸ばしましょう。 手順その2 イベントでスクロールさせる タイルスプライトの画像オフセットアクションで、画像の起点をズラすことができます。 それを利用して、画像をスクロールさせます。 ※タイルスプライト自体は動きません。 フレームごとに「画像Xオフセット」アクションと「画像Yオフセット」アクションで、タイルスプライトの画像を少しずつズラします。 ↑この画像では「画像Xオフセット」アクションで、1を足してズラしてます。 Y についても同様に +1 してズラしましょう。 完成したイベントがこちら↓ 完成! シーンをプレビューしてみましょう。 左上に向かって画像の星が動いていれば完成です!👏 数値を変えたり、足したり引いたりすると、動く方向や速度が変えられます。 お試しあれ😉

v5.0.0-beta105 がリリースされました。

イメージ
GDevelop v5.0.0-beta105 がリリースされました🙌 前回から約一週間という短い期間でのバージョンアップです。 今回も個人的に気になった主な更新内容をピックアップしてみました! 💝 改善点 GDevelop で制作されたゲームを紹介するショーケースを追加。 「新しいプロジェクトを作成する」か開始ページの左下にある「GDEVELOP GAMES」から開くことができます。 専用のフォーム から自分が作ったゲームを申請することもできます。 normalize 式を追加。 数学的ツールにあるのかと思いましたが、私には見付けられませんでしたw おそらく、ある数値が指定した最小値から最大値の間で、どの位置にあるかを 0 から 1 の尺度に変換する式だと思います😅 【追記】バグだったようです💦 問題点 としてあげてもらいました。 なにかのキーが放されたかを確認する条件を追加。 キーは指定せず、なんかキーが放されれば真(True)となる条件です。 AdMob のアクションと条件にヘルプリンクを追加。 🐛 バグの修正 タイルマップの JSON ファイルが変更され、タイルセット JSON も設定されたときにタイルマップが更新されない問題を修正。 てっきり Tiled で更新されたら GDevelop 上でもすぐに変化が確認できるようになったのかと思ったのですが、それとは別な問題への対応だったようです😅 タイルマップの Display mode を index にしても、タイルマップのレイヤーが正しく表示されない問題を修正。 イベントでわざわざ再設定する必要はなくなりました👍 Web アプリでタイルマップが機能しない問題を修正。 特定のブラウザでフルスクリーンが機能しない問題を修正。 ブラウザでサードパーティプロバイダーにサインインするように Firebase アクションを修正。 Yarn エディターでマウスホイールボタンでのドラッグができない問題を修正。 ウィンドウのサイズを変更した後に、まれに発生するレイアウトの不具合を修正。 今回は開発者向けの情報以外は全部紹介してみました🤓 詳細は GitHub の v5.0.0-beta105 ページをチェック!

壁ジャンプ(壁キック)と壁張り付きの作り方

イメージ
GDevelop のプラットフォームキャラクタービヘイビアはとても便利ですが、壁への張り付きや壁ジャンプには対応していません。(端っこを掴むというニッチな機能はあるのにねw) そこで、壁への張り付きや壁ジャンプもできるようにする方法を紹介します。 ちなみに、ゼロから作る様子の動画もあります。 英語モードですが、作り方の参考にしてください。 このページではゼロから解説すると、 めんどくさ ……長くなるので、要点のみ解説していきます。 操作するキャラクターの設定 まず、操作対象のキャラクター(スプライトオブジェクト)に、プラットフォームキャラクタービヘイビアを追加します。 その時、「デフォルトコントロール」は OFF にしましょう。 これは壁ジャンプをした時に、一時的に操作不能にするためです。 次に、オブジェクト変数「WallJumpDirection」を追加します。 この変数には、壁ジャンプする方向が入ります。 0 は壁ジャンプをしていない状態、1 は右方向へ壁ジャンプ中、-1 は左方向へ壁ジャンプ中、を表します。 初期値は 0 です。 あと、ポイントの追加も必要ですが、それについては後記します。 壁の設定 てきとーにプラットフォームビヘイビアを追加したオブジェクトを用意しましょう。 特筆すべき点はありません。 イベントを作成する 大きく分けて、以下の 3 つのイベントを作ります。 Player のカスタムコントロール 1. 壁とは逆方向へジャンプ 2. 壁に張り付く 以下で、それぞれについて解説します。 Player のカスタムコントロール ここで、オブジェクト変数「WallJumpDirection」が 0 の時のみ、基本的な動作ができるようにしています。 逆に言うと「WallJumpDirection」が 0 以外 の時、つまり壁ジャンプ中は操作ができないようになります。 壁とは逆方向へジャンプ このイベントは、壁ジャンプした瞬間から上昇中は、コントローラ(キーボード)の入力に関係なく壁の反対側へジャンプし、頂点を越えてから左右の操作ができるようになる、という、よく見る壁ジャンプの挙動を実行するためのものです。 「WallJumpDirection」が 1 の時は右へ、「WallJumpDirection」が -1 の時は左へ、強制的に移動するようにしています。