投稿

2021の投稿を表示しています

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

イメージ
基本的なことなのに意外とボタンの作り方って情報が少ないので、私流の方法ですが作り方を紹介します第二弾。 シンプルな第一弾はこちら↓ 「 シンプルなボタンの作り方 」 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 の時は左へ、強制的に移動するようにしています。

GDevelop のアップデート(バージョンアップ)手順

イメージ
手順と言っても、普通は何もしなくても勝手に上がります😅 GDevelop を起動してからしばらく経った後(裏でこっそり自動ダウンロードされます)、GDevelop を終了し(ここでも少し待ちましょう)再度起動させれば自動的にアップデートされて、その通知が表示されます。 ただし、環境設定で「自動ダウンロードとアップデートのインストール(推奨)」を OFF にしているとか、何らかの原因によりアップデートチェックに失敗したりすると、上がらなかったりします。 ※現状 Pre-release (事前公開)がある状態では、アップデートチェックに失敗するようです。 そんな時でも、正式公開まで待てば自動的にアップデートされます。 手動でのアップデートは、以下の手順でおこなえます。 手動アップデートの手順 1. メニュー「ヘルプ」の「GDevelop について」を選択。 2. 「CHECK AGAIN FOR NEW UPDATES」をクリック。 3. 「A new update will be installed after you quit and relaunch GDevelop」と表示されたら GDevelop を再起動しましょう。 なお、ここで Error と表示される場合は、何らかの原因により失敗しています。 まぁ大抵、まだ Pre-release の段階だからだったりします。 4. 起動するとアップデート内容が表示されます。(環境設定による) 英語ですw これでアップデートは完了です。 もし、「自動でアップデートされないよ💦」という方は一度上記手順を試してみてください😉

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

GDevelop v5.0.0-beta104 がリリースされたので、今回も個人的に気になった主な更新内容をピックアップしてみました! ✨ 新機能 Tilemap オブジェクトの追加 ついに来ました念願のタイルマップ機能!🎉 このオブジェクトを使用することで、外部エディターの Tiled で作成したタイルマップを GDevelop に組み込むことができるようになります。 まだ、「実験的なオブジェクト」の段階で、機能的にも制限は少なくないですが、RPG など多くのゲームで活用できる機能なので、より幅広いジャンルのゲームが、より作りやすくなることでしょう。 さらに、Wiki のドキュメントは既に日本語化されています👏( YU-TANG さんに感謝!) GDevelop Wiki タイルマップオブジェクト 実はエディター内の翻訳も既に完了しているのですが、今回のバージョンには反映されていないようです。 次のバージョンアップに期待しましょう。 トップダウン移動ビヘイビアがアイソメトリの移動に対応 ナンノコッチャかもしれませんが、これは斜め上から見るクォータービュー形式の移動にも対応したということです。 戦略シミュレーションなどでよくある、ひし形マップの移動にも利用できるようになりました。 ※まだ Tilemap オブジェクトはアイソメトリック(クォータービュー)形式には対応していない点に注意してください。 💝 改善点 AdMob 拡張機能の更新 既に AdMob を利用しているゲームは要注意です。 今回の更新でアプリ ID が Android 用と iOS 用に分離されました。 アプリをエクスポートする前にアプリ ID を設定し直す必要があります。 やらないと、起動時に終了するそうですw プレビューウィンドウのメニューバーを非表示化 地味な変更ですが、ゲームをプレビューした時に表示されるウィンドウから、メニューバーが消えました。 まぁ個人的には Developer Tools を表示するくらいしか使い道はなかったので、消えてよかったと思います。 なお、環境設定から表示するように変更することも可能です。 その他 私が今回ピックアップしたこと以外にも、多くの新機能や改善点、またバグの修正がおこなわれています。 詳細は GitHub の v5.0.0-beta104 ペ

2段ジャンプできるようにする【プラットフォームキャラクタービヘイビア】

イメージ
GDevelop の「プラットフォームキャラクター」ビヘイビアを利用しているゲームで、2 段ジャンプをできるようにする方法を紹介します。 そもそもの「プラットフォームキャラクター」ビヘイビアを利用したゲームの作成方法は、チュートリアルなどを見てください🧐 動画で見るプラットフォーマーチュートリアル GDevelop Wiki プラットフォーマー チュートリアル このページでは、プラットフォーマーチュートリアルで作ったゲームをベースに、解説していきます。 なお、作成手順が見れる動画もあるので参考にしてください。 1. キャラクターに変数を追加する まずは「プラットフォームキャラクター」ビヘイビアを追加したオブジェクトに、空中でジャンプした回数を記憶するオブジェクト変数「ジャンプ回数」を作成します。 初期値は 0 にしておきましょう。 2. イベントを追加する 次に、2 段ジャンプを実現するために、以下のように 2 つ(2行)のイベントを追加します。 それだけで、2 段ジャンプができるようになります🎉 この画像のようにイベントのグループ機能を使うと、見やすくなるのでおすすめです。 なお、ここではイベントを先頭に追加していますが、ゲームによっては適切な位置に追加しなければ、正しく機能しないかもしれないので気を付けてください。 2 つのイベントと、その条件とアクションについては、以下で詳しく解説します。 解説:1 つめのイベントについて まずは 1 つめのイベントの条件について説明します。 このイベントは、2 段ジャンプを実行するためのイベントです。 条件「Player は落下中である」について これは、ジャンプの頂点を過ぎ、落下し始めてから 2 段目のジャンプができるようにするための条件です。 また、ジャンプではなく、足場から落ちたときにも有効(True)です。 なお、これを「Player はジャンプ中である」にしてしまうと、最初(地上から)のジャンプをした直後に条件をクリアーしてしまい、即 2 段目のジャンプが実行されてしまいます。 結果、まるで 2 段ジャンプが機能していないかのように見えてしまいます😱 条件「Space キーを押している」について Space(スペース)キーは、このゲームのジャンプキーです。 もちろん、違うキーをジャンプキーにしている場合は、こ

動画で見るプラットフォーマーチュートリアル

イメージ
基礎中の基礎、という感じのプラットフォーマーチュートリアルをやってみました。 GDevelop Wiki プラットフォーマー チュートリアル 10分くらいで終わるかと思ったらガッツリ1時間かかりました😅 その様子を動画にしたので、何かうまくいかないことや、分からないこととかあったら参考にしてみてください。 ダウンロードできる敵の画像が、チュートリアルで使用されている画像とは左右逆なため、チュートリアルどおりでは、後ろ向きに進んでしまう問題にも対応しています。 なお、動画は2倍速にしていますが、それでも当然30分ほどありますw

サクッと条件やアクションを追加する方法

イメージ
地味な機能であまり知られていませんが、イベントの「条件を追加」や「アクションを追加」を 右クリック すると、コンパクトなウィンドウで条件やアクションを追加することができます。 この機能では、プロパティを設定する画面はスキップされるので、プロパティ設定が必要のない条件やアクション(例えば「シーンが始まった」や「オブジェクトを削除する」など)を追加したい時は特に便利です。 お試しあれ😉

ブラウザ上で動くオンライン版を試してみた感想

イメージ
あくまでも「オンライン版はお試し用」という位置付けだとは思いますが、どこまでできるのか調べてみました。 ちなみにブラウザ上で動くなら、スマホでも使えるのではないかと思い、無謀にもスマホのみでゲーム制作にチャレンジしてみた動画はこちらですw かなり根気は必要ですが、作れなくはないなと感じました。 でもせめて、タブレットくらい画面が大きくないと、やっぱツラいですね😅 GDevelop オンライン版ではできないこと 数は意外と少ないのですが、致命的な事も少なくありません😥 その1. 画像やサウンドなどのファイルが利用できない これはキツイw 利用できるのは Asset Store にあるものだけです。 (スターターを利用すれば既存のリソースは利用できます) リソース画面で無理やりパスを書き換えることはできますが、プレビューすると CORS で表示されないっぽいです。 その2. 外部アプリが利用できない 画像ファイルが使えないなら Piskel で作成を!っと思っても Piskel はデスクトップ版にしか付属していないので、使えません。 同様に Jfxr と Yarn も利用できません。 その3. デバッガーが利用できない まあまあ不便。 当然、プロファイラーやネットワークプレビューもできません。 代わりに Chrome DevTools を使えばなんとかなりますが…… その4. 拡張機能のインポート 公式に配布されている拡張機能は利用できますが、オリジナルの拡張機能をインポート・エクスポートすることはできないようです。 でも作ることはできます。 GDevelop オンライン版の使いみち GDevelop をインストールせずに試してみたい未経験者の方はもちろん、デスクトップ版を利用しながらでも、プロジェクトを閉じることなく、色々と試してみることができるので、テスト環境として利用できると思います😉

新しいアクション/条件エディターを使用する

イメージ
GDevelop を最近インストールした方は、最初から新しいアクション/条件エディターになっていると思いますが、かなり昔から使用している人は、アップデートしても古いモードが引き継がれるので「あれ?みんなのエディターなんか違くない?」とか思いがちです😅 ↓これが新しいアクション/条件エディターです。 ↓そんでこっちが古いアクション/条件エディターです。 正直、どちらが使いやすいかは人によると思います。 ただ、古い方はいつか廃止されてしまうかもしれないので、今のうちに新しい方に慣れたほうが良さそうです。 変更は「ファイル」メニューの「環境設定」からおこなえます。 ↑このスイッチを ON / OFF して切り替えられます。 全くその必要はないと思いますが、一連の操作を動画にしたので、ご覧になりたい方はこちらをどーぞ🤗 前半は英語で、後半は日本語という謎動画ですw

意外とややこしいスプライトの反転

イメージ
GDevelop はゲームエンジンとしては珍しく、今のところ(v5.0.0-beta103)エディター上でスプライトを反転させることができません😢 反転させるにはイベントで、スプライトに反転エフェクトをかける必要があります。 このアクションです↓ 水平方向、または垂直方向に反転させることができます。 もちろん水平反転させてから垂直反転する、といったことも可能です。 なお、他のゲームエンジンでは、サイズやスケールの値をマイナスにすることで反転させることができたりしますが、GDevelop ではそれらの値をマイナスに設定することはできません。(0 になります。つまり見えなくなります💦) ⚠ エディター上で無理やりマイナス値にすると、一見それっぽくなりますが、実行時には 0 になり見えなくなります。 反転時の当たり判定とポイントについて スプライトには当たり判定やポイントを設定できます。 それらはスプライトが反転されると以下のように変わります。 まず当たり判定は、デフォルトの衝突マスクでも、カスタム衝突マスクでも、スプライトに合わせて反転してくれます。 これは多くの場合、期待通りに機能してくれるでしょう。 次にポイントについてですが、こちらは少々ややこしいです。 そもそもポイントには最初から「Origin」と「Center」が設定されています。 Origin は原点を指していて、スプライトの位置(X と Y の値)で使用されるポイントです。 Center は中心を指していて、スプライトの回転や反転するときの基準となるポイントです。 この2つのポイントは、反転しても反転しません(分かりにくいw) しかし、独自に追加したポイントは反転します😵 具体的に例を見てみましょう。 スプライトには、このようにポイントが設定されていた場合↓ 分かりにくいけど赤丸のところに追加した「Point」というポイントがあります。 そのスプライトを反転させると、それぞれのポイント位置は、このようになります↓ 赤い+ は Origin、 黄色い+ は Center、 水色+ は Point スプライトが反転しても、Origin は反転していません。 そのためスプライトの位置(X と Y)も反転前と変わりません。 Center はそもそも反転の基準となっているため、同じ位置のままです。 そして独自

構造体 (Structure) の変数を複製(ディープコピー)するには?

イメージ
 GDevelop の変数は入れ子にすることができ、そのような変数を「構造体」と言います。 その構造体を複製(コピー)したい時に使えるテクニックを紹介します。 少々力技ですが、JSON を経由させることで、簡単に複製することができます。 こんな感じです↓ まず、コピー先の変数に応じて以下のアクションから選択します。 JSONをグローバル変数に変換する JSONをオブジェクト変数に変換する JSONをシーン変数に変換する そして「JSON文字列」には、コピー元の変数に応じて、以下の式を利用します。 「グローバル変数をJSONに変換」⇒ GlobalVarToJSON() 「オブジェクト変数をJSONに変換する」⇒ ObjectVarToJSON() 「シーン変数をJSONに変換」⇒ ToJSON() このように一度 JSON へ変換することで、どんな構造の構造体でも複製することができます👍

スクロールできるリスト型の UI を作れる拡張機能を作ったよ

イメージ
スクロールできるリスト型の UI を簡単(?)に作れる拡張機能(エクステンション)を作成してみました。 詳しくは フォーラムの投稿 をご覧ください。 実際に使用している様子の動画はこちら↓ 色々なシーンで使えるので便利だよ👺 ご自由にご利用ください。

テキストを改行する方法

イメージ
テキストオブジェクトのテキストをイベントで改行する方法が、GDevelop ではちょっと特殊なので、解説したいと思います。 ベースが JavaScript なので、改行は "\n" を入れる必要があるのかと思いきや、実は値の中で直接改行すれば良いだけです。 ちなみに、改行するための専用の関数(式)も用意されています。 それが NewLine() です。 こんな感じで、テキストに連結して使用します↓ ただし、この方法だと煩雑になりやすいので、通常は前者の方がオススメです😉