井の中のプログラムこの広告は、90日以上更新していないブログに表示しています。engineWidgetでゲーム内の情報を表示したりインタラクティブ性を持たせてみます。前回同様widgetブループリントを開きます。ボタンを使ってイベントを呼べるようにしてみます。パレットからButtonを階層へドラッグアンドドロップ。imageを置いたときのように左上に白い四角形が現れたと思います。画面下側においてみましょう。おけたら、前々回の記事のように実行したら画面に出るようにブループリントを書きましょう・・・の前に、ボタンを押すためにはマウスが使えないと不便なのでGameControllerブループリントを作ります。Eventにチェックを入れます。これでマウス入力も受け付けます。一度実行してみると、ボタンが現われますのでマウスでいじくってみましょう。イベントなどは書いていませんが、ボタンの色が多少変化してレスポンスを感じ取れると思います。このボタンにイベントを追加します。widgetの編集画面に戻り、ボタンの詳細パネルのOnclickedの+を押しますすると、このwidgetのイベントグラフに切り替わり、Onclickedのイベントが追加されます。ボタンがクリックされたとき、このイベントが発生します。ボタンを押した回数を表示してみましょう。Integer型の変数を作ってボタンが押されるたびに+1します。この値をwidgetで表示します。右上の切り替えボタンを押してデザイナーの編集画面に戻ります。パレットからTextを追加します。テキストボックスが出ますので位置を変えて値を0としておきます。Textの隣のバインドからバインディングを追加します。Textの関数が作られたと思います。Nodeの引数がテキストボックスに表示されます。先ほど作った変数をGetして引数に指定します。実行してみるとボタンを押すたび数字が増えていくようになりました。今までの事柄を応用すればゲームに役立つ多くのことができるかと思います。ほかにもたくさんwidgetには機能がありますが、基礎の基礎を学べたということでwidget関連はこのへんで。engine前回扱ったwidgetでアニメーションで簡単なトランジション(画面転換の効果)を作ってみます。黒単色の画像を用意しましょう。大きさは適当で大丈夫です。前回同様widgetの編集画面を開きます。パレットからimageを階層へドラッグアンドドロップ。Panelいっぱいに敷き詰めましょう。ここで役に立つのがアンカーです。l画像の基準点を決めるもので座標を打ち込むとアンカーからみた座標で画像が表示されます。一遍に敷き詰めたいときはアンカーを押して一番右下の全面が白いボタンを押すと全画面基準の座標になるわけです。この状態でオフセット○○の値をすべて0にすれば画面一杯に敷き詰まった状態になるのです。ここまでが準備段階です。ようはこの黒い画像をアニメーションでどかせば(チープですが)トランジションにできるというわけです。左下にある緑色の+アニメーションを押してアニメーション名を決めます。隣のほうに緑色の+Addがありますのでそこから黒い画像を表すimageをアニメーションに追加します。詳細パネルのオフセット○○などの数値の左にあるマークでキーフレームを打ち込みます。キーフレームについては動画編集ソフトやMMDなどでよく登場するのでそちらのほうの解説をご覧いただくといいかもしれませんが、この時点でこの値がこの状態になるようにソフトが補間してくれると思ってくだされば不足はないかなと思います。0秒時点のオフセット○○の値をキーフレームに追加したら下のバーを1秒のところに持っていき黒い画像をどかしてキーフレームに追加しましょう(どこにどかしても大丈夫ですが平行移動がいいでしょう。オフセットLeftの値を画面サイズの1920にして追加)。キーフレームに追加ができない、押しても反応しないときは+Addの右側のひし形のマークが選択状態になるようクリックしてみましょう。下のほうにある再生ボタンを押すと黒い画像がずりっとどいてくれたのではないでしょうか。これを場面転換時に再生すれば何もないよりはなんとなくカッコがつく気がします。画像を真っ黒にせずにふすまとか何かしらのデザインを施せば文句なしかな。ブループリントでアニメーションを呼び出すときは、こんな感じになります。playanimationの引数playmodeをリバースにすると逆再生ができますので、トランジションでin,outができます。次回はwidgetからイベントを起こしたりしてみます。engineを使っているのですが、2D画像を扱うときに”widget”なるものがかなり便利に扱えることを知りましたので覚書。画像系はHUDを使って描画できますが、ただ描画するだけならまだしも移動や拡縮、回転をブループリントで施すとなると少々骨です。扱う画像が多くなるとスパゲッティどころの騒ぎではなくなります。そこで登場するのがwidgetです。一枚画像を表示させてみましょう。Widgetを選んでみます。開いてみると、このような画面になるかとおもいます(右上でデザイナーが選択されてるのを確認してください)。これがwidgetの編集画面です。真ん中の点線枠が実際の画面サイズになるので実際に画像を置きながらレイアウトをきめることができます。実際に編集していきます。左のパレットからimageをCanvasPanelの下にドラッグ&ドロップ。すると点線枠の左上のほうに小さな白い長方形が現れたかと思います。詳細パネルのAppearanceからimageを選んで使いたい画像を選ぶと白い長方形が画像に変化したかと思います。画像自体をマウスで動かしたり拡大させたりしていい感じの位置になったらひとまずコンパイルし保存。いい感じの位置にするのに便利なアンカーという機能もありますが説明はまた次回。Viewport(以下のようになります)。engineのスクショを画像に使ってしまったのでややこしいかもしれませんが・・・2D素材が思い通りの位置に来たかと思います。次回はこれに視覚的な動きを与えていきます。ブループリントについてTweet広告を非表示にするもっと読むコメントを書く2016-04-10ブログをはじめました。初めまして、びきたろうと申します。ゲームプログラムを学んでおります。制作活動をしていくにあたりブログを開設し、どんな事をしてるのかをこれから書いていこうと思っています。具体的には今作ってるゲームや昔作っていたゲーム、それに付随する技術のことがメインとなっていきます。17:23ブログをはじめました。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。