こがしぱんるーむ

初心者のゲームプログラミング勉強記録

ティラノビルダー始めました~UIカスタマイズ・メッセージウィンドウ~

こがしぱんです。

 

前回は「変数の状態によって、物語を分岐」をやってみました。

 

今回は「UIカスタマイズ」です!

 

ティラノビルダーにある「UIデザインツール」を使うことで、

自由度の高いメニューを作れるみたいです!

 

さっそく、やってみます!

 

メニューの「プロジェクト」から「UIデザインツール」を選択。


↓の画面が表示されました。

ここが、UIカスタマイズの作業場になるんですね!

 

↓の赤枠は「操作パネル」と呼ばれるものです。

 

それではまず、メッセージウィンドウから変更していきます。

 

メッセージウィンドウの黒枠をクリック。

 

操作パネルが「パラメーター」に切り替わりました。

 

この操作パネルに記載されている情報が、現在表示されているメッセージウィンドウの

情報になります。

 

操作パネルの「クリックで画像変更」をクリック。

 

ファイル選択画面が表示されました。

見た感じメッセージウィンドウ画像はないので、ファイル選択からデータ内にある

メッセージウィンドウ画像を読み込みます。

 

今回使用させていただくメッセージウィンドウはこちら!

 

びたちー素材館様からお借りしました!

www.vita-chi.net

 

「ファイル選択」をクリックして、メッセージウィンドウ画像を読み込み。

 

ダブルクリック。

 

表示されましたー!

 

しかも、メッセージウィンドウ画像を上下左右に自由にドラッグできるので、

細かな位置調整が可能です。

 

ベストな位置に設定したら「適用する」ボタンをクリック。

 

「UIデザインを保存しました」の画面が出てきますので、OKを押すと設定完了です。

 

さっそく、プレビューで見ていきます!

変更されてる!!

 

メッセージウィンドウの変更完了です!

 

今回は、文字とメッセージウィンドウが綺麗に収まりましたが、

メッセージウィンドウによっては文字がはみ出したりするかもしれない...。

 

そんな時は「文字の位置調整」が可能です!

 

まず、「プロジェクト」をクリック。


「ゲームコンフィグ」をクリック。

 

ゲームセッティング画面↓が表示されますので、「メッセージウィンドウ」を

クリック。


「位置」をクリック。

 

「メッセージ表示の位置調整」で文字の位置調整が可能です!

 

ということで、今回はここまで!!

 

今回は「UIカスタマイズ・メッセージウィンドウ」をやってみました。

「UIデザインツール」を使用することで、好きなメッセージウィンドウの画像を設定でき、ドラッグで自由に位置調整ができるので、すごく便利でした!

 

次回もゲーム制作やっていきます!

 

 

 

ティラノビルダー始めました~変数の状態によって、物語を分岐~

こがしぱんです。

 

前回は「変数管理」をやってみました。

 

今回は「変数の状態によって、物語を分岐」をやっていきたいと思います!

 

前回は、変数の値を自由に変更する方法でしたが、

今回は、最終的な好感度によって告白が成功するか失敗するかといった仕組みを

チュートリアルに沿って作ってみます!

 

前回作成したシナリオファイル「yuko_point」の最後に「好きです!」と告白して、

その結果を好感度によって分岐させる処理をしてみます。

 

↓告白テキスト追加(テキストはチュートリアルのものを使用)。

 

変数の結果によってシナリオを分岐させる場合は、「ジャンプ」コンポーネント

使用します。

 

まず、以下のようにコンポーネントとテキストを配置。

 

さっそく、okとngの場合を変数の値によって分岐させていきましょう!

 

まず、ジャンプコンポーネントをクリックすると、

パラメーターエリアに「実行条件を指定する」という項目があります。

 

この項目は、変数が指定した状態を満たす時だけ実行することができます。

 

チェックボックスにチェックを付けると、

↓のような画面になります。

 

ここで条件を設定できます!

 

まずは、okの場合。

条件は「yuko_point」が10より大きい時なので、

A=yuko_pointとして、「A>B」の時に設定して反映。

 

ngの場合。

条件は「yuko_point」が10より少ない時なので、

A=yuko_pointとして、「A<B」の時に設定して反映。

 

それでは、保存、プレビュー!

 

okの場合から。

 

10に+5されて15になりましたね!

 

告白!

 

okいだだきました!!

 

なんかngの回答も出てきた!

 

okもらった後に振られた...笑。

うーん、どこか間違ってるのかな。

 

とりあえず、ngの場合も見てみます。

 

10に-5されて5になりました。

 

告白。

 

おお!ちゃんとngの回答に行きました!

ngの方は問題ないみたいですね。

okの方はチュートリアルと同じはずなんですけど、どこが問題なんだろう...?

 

ちょっとチュートリアルと違いますが、ジャンプコンポーネント(赤枠)とラベル(赤枠)を追加してみました。

 

okの後にngのテキストが表示されるので、okの後はジャンプして、

common2へ行くように設定しました。

 

これで、いけるのでは...?

 

保存、プレビュー!

 

いけるか...!!

 

 

いけたーーーーー!!

よっしゃーーー!!

 

無事、解決できました!やったぜ!

 

この調子で次の項目いってみましょう!

 

次は「ランダム変数」です。

変数設定で、ランダム要素を持たせたい時ですね。

 

その場合は、変数設定コンポーネントのパラメーターエリアの

オペランド」から「乱数」を選択。

 

数値の範囲が設定できます。


この数値は0~10の間で数値が足し算されます。

 

試しに、5~10の数値で設定して、反映。

 

保存、プレビュー!

 

16が出てきました。

 

つまり、6の値がランダムで選択されて10にプラスされたことになりますね!

RPGとかのダメージ判定に使えそう!

 

続きまして「システム変数」です。

 

システム変数とは!

チュートリアルによると、ゲーム全体で共有される変数。

 

設定方法は、変数を定義する時に使った変数管理画面から、

 

とりあえず、「a」と入力して追加。

 

「システム変数」が表示されるので、

 

システム変数のにチェックを入れ、値を入力すると、

この変数は、ゲーム全体で共有されるように設定できます。

 

うーん、チュートリアル読んでみたけど、あまり理解できていないかも。

ゲームの1週目クリアした後に2週目でおまけ要素出す時に使うみたいな感じ...?

 

実際にシステム変数を使う場面にならないと、よく分からない....。

ゲーム作る時に使う機会があれば、その時に詳しく見ていきます!

 

というわけで、今回は、ここまで!!

 

今回は「変数の状態によって、物語を分岐」をやってみました。

変数の値によって分岐を変えられるので、凝った条件のゲームとか作れそうですよね!

 

次回もゲーム制作やっていきます!

 

 

 

ティラノビルダー始めました~変数管理~

こがしぱんです。

 

前回は「フラグ管理(スクリプト)」をやってみました。

 

今回は「変数管理」をやっていきます!

前回に続き難しそう...。

 

今回の変数管理ですが、何とスクリプトを書かずに変数を扱うことができる!らしいです。

 

前回は「iscript」コンポーネントを使って、スクリプトに計算式を記述していきましたが、この手間が省けるってこと...!?

 

さっそく、やっていきます!

 

まず、変数について。

前回も少し触れていきましたが、チュートリアルに沿って改めて確認していきます。

 

変数とは、「何かを記憶しておく箱」

 

この「何か」というのは、例えば、

・プレイヤーに入力させた、主人公の名前
・キャラクターの好感度
・フラグ管理

などです。

 

言葉だけじゃイメージが難しいので、実践していきます!

 

今回は「ゆうこちゃん」の好感度を増減していきます。


まず、変数の名前を決めます。

チュートリアルに沿って「yuko_point」。

 

選択肢で好感度の増減があった時に「変数に入っている値」=「yuko_point」の値を

増減していきます。

 

次は「変数を定義する」です。

変数を使うためには、最初に変数を定義する必要があります。

 

メニューの「プロジェクト」から、

 

変数管理」を選択。

 

変数管理画面が出てきました。

 

変数名にyuko_pointを入力。

 

追加ボタンをクリック

 

yuko_pointという変数が追加されました!

次は、初期値の値に10を入力。

この初期値というのは、変数=yuko_pointの中に初めから入っている値になります。

 

これで、変数の定義は完了です。

 

次は「変数を操作する」です。

選んだ選択肢によって、好感度が増えたり減ったりする操作です。

ギャルゲーでよく見る!

 

作成するのは、チュートリアルが用意している

「ねぇ、何か気づかない?」

という質問に対して、

 

「髪切った?」
「鼻毛伸びた?」

 

という選択肢から

「髪切った?」は好感度が上がり、

「鼻毛伸びた?」は好感度が下がる仕組みでやっていきます。

 

「鼻毛伸びた?」が目に見えて地雷選択肢過ぎる笑

 

プロジェクトの新規シナリオで作成していきます。

シナリオ名は「yuko_point」。

 

さっそく、入力してみました。(テキストはチュートリアルのものを使用)

 

保存して、プレビュー!

 

 

ゆうこちゃんが消えた!!

 

何でだろう、キャラの位置がずれてるのかな...?

 

とりあえず、以前作成した「scene1」と比較。

 

 

あ!背景コンポーネント間違えてました!

 

 

背景部分をやり直し。

 

保存、プレビュー!

 

 

ゆうこちゃんが無事に表示され、上手くいきました!

 

次に、それぞれの分岐先で、変数の値の増減を行う処理をします。

 

まずは、好感度を上げる処理から。

 

左エリアの「変数設定」コンポーネントをラベル「kami」の後ろに

ドラッグ&ドロップ。



「変数設定」コンポーネントを選択。

 

パラメーターエリアに↓のように入力し、反映ボタンをクリック。

これで、「髪切った?」を選択した時、yuko_pointの値10に+5されることになりますね!

 

好感度を下げる処理も同じ様にしていきます。

「変数設定」コンポーネントをラベル「hanage」の下にドラッグ&ドロップ。

 

今回は好感度を下げる処理なので、変数設定のパラメーターエリアは、

↓のように5を引き算します。

 

ただ、本当に値が変わっているか不安になる時ってありますよね!

 

そこで、iscriptを配置して変数の確認が可能です。

 

ラベル「common」の後ろに「iscript」をドラッグ&ドロップ。

 

alert(f.yuko_point);」とスクリプトを記載。

スクリプト文はチュートリアルのものを使用)

 

保存、プレビュー!

 

「髪切った?」を選んだ時。

 

 

「鼻毛伸びた?」を選んだ時。

 

 

できてる!

 

ちゃんと変数が増減されましたー!嬉しい!!

 

これで、選択肢によって、好感度が変わるゲーム作成に挑戦できますね!

 

ということで、今回はここまで!!

 

今回は「変数管理」をやってみました。

最初は難しそうなイメージしかなかったのですが、

変数の値を調整してみて、選択肢によって実際に値が変わっているのを見ると

嬉しいものがありますね!

 

次回もゲーム制作やっていきます!

 

 

 

ティラノビルダー始めました~フラグ管理(スクリプト)~

こがしぱんです。

 

前回からテクニック編に入り「便利な機能」という項目をやっていきました。

 

今回は「フラグ管理(スクリプト」です!

 

フラグ管理と聞くと、ギャルゲーとかでフラグを回収しているかどうかでバッドエンドやグッドエンドに分岐したり、好感度が一定以上で分岐したりするみたいなイメージですね。

 

そして、このフラグ管理ですが、ティラノビルダーでも行うことが可能らしいです!

なんと、足し算と引き算ができれば簡単に作れるらしい...!

 

難しそうですが、さっそくやってみましょう!

 

まず、ティラノビルダーでフラグ管理を行う場合「iscript」というコンポーネントを使用します。

左エリアのスクリプトタブの中にあります。

 

iscriptをドラッグ&ドロップするらしいのですが、前回のシナリオが残っているので...、

とりあえず、新規シナリオを作成して、フラグ管理用のものを用意しました。

 

ファイル名は、「flag」で作成。

 

新規シナリオ画面に「iscript」をドラッグ&ドロップ。

 

追加するとテキストエリアが表示されました!

このテキストエリアにフラグやステータスを計算する式を記述していくみたいです。

 

さっそくチュートリアルに記載の以下計算式をいれていきます!

 

保存してプレビュー!

前のシナリオがはじまった!?

 

普通にflagファイルがプレビューされると思い込んでましたが、flagファイルは同じプロジェクト内で別シナリオにしただけだから、普通にプレビューしたらscene1から始まるんだった...。

 

「ここからプレビュー」にして、再度挑戦!

 

闇の中からポップアップが2回出てきました!

これは、成功?みたいです。

 

計算式について、チュートリアルの解説を見ていきましょう。

【最初の var flag=3 ; という箇所で flag という入れ物を用意して 3 という値を入れています。そして、flagの値を alert() で表示しています。
次の flag= flag + 3 ; という箇所で flagの値にさらに3を足し算しています。このflagのような入れ物のことを「変数」といいます。】

 

うーん、イメージ的に、flagという入れ物の中に3を入れる。

そして、「alert」で「flagの中に3が入ってますよ~」という警告をポップアップさせる。次の「flag= flag + 3 ; 」は、flagという入れ物に+3される、そして、このflagという入れ物は変数と呼びます。みたいな!

 

以下、サイト様より「変数」は、値を入れたり出したりするための箱!っていうのが個人的にしっくりきました。

kitsune.blog

 

あと、最初の「var」がよく分からなかったんですけど、調べてみると変数を宣言するためのものらしいです。

以下、サイト様を参考にさせてもらいました。

e-words.jp

 

iscriptについては、JavaScriptというプログラム言語で記述することができるらしいのですが、とりあえず、ティラノビルダーでゲームを作る時には上の構文さえ覚えておけば何とかなるらしいです!

 

次は、変数によって、処理を振り分ける場合です。

↓の様なif文を処理の間に挟み込むことで物語を分岐することができます。(チュートリアルのif文を利用しています。)

もし、変数が1だったらA処理、もし、変数が1以外だったらB処理みたいな感じかな?

 

フラグによって、次に読み込むシナリオファイルを変えるといった処理で、ストーリーやエンディングを分けることができるらしいです。

 

ということで、今回はここまで!!

 

今回は「フラグ管理(スクリプト)」をやっていきました。

計算式の記述で頭がごちゃごちゃなりそう...笑

いずれは、JavaScriptも勉強した方がいいのかもしれない...!

 

とりあえず、今はティラノビルダーをしっかり進めていきたいと思います!

 

次回もゲーム制作やっていきます!

 

 
 
 

ティラノビルダー始めました~便利な機能~

こがしぱんです。

 

前回は「ゲームが完成した時の公開方法」をやっていきました。

ティラノビルダーの入門チュートリアルが全て完了しましたね!パチパチ

 

今回から、テクニック編に入ります!

(↓の赤枠部分になります。)

 

テクニック編の最初は「知っておくと便利な機能」です。

さらっと見たところ、ちょっとした補足?みたいな感じですね。

 

さっそく実践していきます!

まずは、「コンポーネントの開閉」です。

シナリオエリアの右上にある「下矢印」をクリックすると、

 

すべてのコンポーネントが開きました!

このボタン一つで全てのコンポーネントを開閉できるのは地味に便利かもしれない...。

全体を確認したい時とかに使えそうですね。

 

あと、コンポーネントをダブルクリックで一つ一つのコンポーネントを開閉が可能ですが、

 

 

今まで、コンポーネントに付いている「下矢印」を押して開いてたので、どっちを使うかは、きっと好みだと思います!

 

あと、シナリオエリアの右上を見てて気になったのが、この虫マーク。

 

何の機能か分からずに疑問だったので、とりあえず押してみました笑

何かいっぱい文字が出てきた!

これは、バグとかの確認的なものかな?

とりあえず、よく分からなかったんで×閉じ。

メニュー画面に戻ると↓画面が開いていました。

デバック機能!!

でも、デバックできるのはPRO版限定みたいです。

PRO版の機会があれば実践してみたいですね。

 

次は「シナリオ検索」です。

特定のシナリオの場所まで移動する時の便利機能ですね。

シナリオエリアの右上の虫眼鏡をクリック。

 

検索ボックスが出てきました。

テキストのみ検索できるようにテキスト以外のコンポーネント部分が黒塗りされているので、分かりやすいですね。


試しに「ゆうこ」ちゃんで検索かけてみます。

 

「ゆうこ」の文字があるテキストタブに移動して、タブの色が染まって表示されます。

 

また、ショートカットキーの「Ctrl + f 」でも検索可能です。

シナリオ検索画面を閉じる時は、再度、虫眼鏡ボタンをクリックするか「Ctrl + f 」を押すことで閉じます。

 

次は「素材確認」です。

現在、ゲームに使用している素材一覧を確認したい時の便利機能です。

左エリアの素材タブをクリック。

 

現在、ゲームに使用している素材一覧が表示されます。

 

試しに、「room.jpg」をクリック。

 

下の方に背景画像が表示されました!

素材の中身を確認したい時にすごく便利ですね!

 

項目は↓の様になっています。

 

そして、ファイル名をドラッグ&ドロップすることで、直接シナリオに反映させることができるらしいです!

さっそく実践!

「room.jpg」を適当なテキストの下にドラッグ&ドロップ。

 

おおお!背景コンポーネントが表示されました!

 

次は、キャラクター表情も追加してみましょう!

試しに、らきすたのこなたみたいな表情しているゆうこちゃんで実践!

 

キャラクターの表情変更コンポーネントも表示されました!

ドラッグ&ドロップでいけるのでかなり便利ですね。

 

次は「一言ヘルプ」です!

一番下に表示されている「はてな吹き出しマーク」のことらしいです。

 

例えば「キャラクター登場」にカーソルを合わせると、↓のようにコンポーネントの解説をしてくれます。

どんなツールか分からなくなった時は、一言ヘルプを見ると解決するかもしれません!

 

ということで、今回はここまで!!

 

今回は「知っておくと便利な機能」ををやってみました。

テクニック編が本格的に始まる前の補足みたいな感じでしたね!

作業を効率的に進めるための便利機能を知れたので使用していきたいです!

 

次回から項目に「フラグ管理」とか「変数管理」とかあるので本格的にテクニック編になりそうな予感...!

 

次回もゲーム制作やっていきます!

 
 
 

ティラノビルダー始めました~ゲームが完成した時の公開方法~

こがしぱんです。

 

前回は「タイトル画面を作成する」をやってみました。

 

今回は「ゲームが完成した時の公開方法」をやっていきます!

 

ゲームが完成した時にティラノビルダーでどのようにして公開していくのか...、

チュートリアルに沿って確認していきたいと思います!

 

まずは、「不具合がないことを確認する」です。

途中でゲームが止まったり、変な動作をしていないか、全てのルートを最初から最後までチェック。

とりあえず、今回は今までチュートリアルで作成してきたゲームで確認します。

「見に行く」のルート「見に行かない」のルート、どちらも変な動作なく問題なしでした!

 

次は「公開方法の決定」です。

ティラノビルダーで作成したゲームは、ブラウザゲームやパソコン、スマホアプリなど様々な配布方法があるようなので、確認していきます!

 

①:ブラウザゲーム形式

ブラウザゲームとしてネットで遊んでもらえるようにする。

・公開方法

リリースしたいゲームプロジェクトのメニューバーの「プロジェクト」を左クリック。

 

「ゲームを書き出す」をクリック。

 

リリース準備用のウィンドウ↓が立ち上がりました。

 

配布形式が「ブラウザゲーム」になっていることを確認。

 

 

「エクスポートを実行」をクリック。

 

↓画像のメッセージが出てきましたので「OK」をクリック。

 

ゲームの場所はというと、ティラノビルダーをインストールしたフォルダ「tyranobuilder_v204b_win_std」内の「export」フォルダをクリック。

 

「browser_~」から始まるフォルダがあり、

その中に作成した「mygame」がありました!!

あとは、この「mygame」フォルダをwebサーバーにアップロードすれば、ブラウザゲーム形式の公開は完了です!

 

②:windowsアプリケーション形式

③:Macアプリケーション形式

→windowaアプリケーション、Macアプリケーション形式として配布する。

・公開方法

上記のブラウザゲーム形式と流れは同じで、配布形式の部分だけ「windows」か「Mac」どちらかを選択してエクスポート。

 

「export」フォルダ内に「win_~」というフォルダがあり、

その中に「mygame-win32-x64」確認できました!

「mygame-win32-x64」フォルダ内にアプリがありましたので、これをクリックするとゲームが起動するはず...!

 

おおー!!無事、起動しました!

チュートリアルによると、出力されたファイルに説明書やライセンスをつけて公開しましょうとのことです!

 

④:iOSアプリ形式

⑤:Androidアプリ形式

iOSアプリ、Androidアプリ形式として配布する。

・公開方法

上記のブラウザゲーム/windowaアプリケーション/Macアプリケーション形式と流れは同じで、配布形式の部分だけ「iOSアプリ」か「Androidアプリ」どちらかを選択してエクスポート。

 

「export」フォルダ内に「android_~」というフォルダがあり、

その中に「mygame」確認!

あとは、出力されたフォルダを手順を沿ってPlayストアやAppストアで公開していくのですが、公開方法をざっと読んでみたところ、じっくり読みながら一緒に実践していった方がいいかなと思ったので、アプリで公開したくなった時に別記事で実践の過程を書いていきたいなと思います。

 

公開方法が気になる方は、下記サイト様にて詳細が記載されています。

iOS版】

shikemokumk.hateblo.jp

 

Android版】

shikemokumk.hateblo.jp

 

以上が主な公開形式です。

チュートリアルの重要ポイントによると、ブラウザゲームスマートフォン向けにゲームを配布する場合、画像や音楽ファイルが大きすぎると、特にスマートフォンでは途中でクラッシュしたり、ローディングに時間がかかりすぎたりして、快適なゲームができない可能性があるため、画像などは圧縮してサイズファイルを小さくした方がいいみたいです。

 

ということで今回はここまで!!

 

今回は「ゲームが完成した時の公開方法」をやってみました!

公開形式がwebにもスマホアプリにも対応しているので、色々なところで公開できるのがすごくいいですよね!

 

そして!今回で入門チュートリアル編完了です!!

ただ、テクニック編が残っているようなので、次回からテクニック編を使用してゲーム制作やっていきます!

 
 
 

ティラノビルダー始めました~タイトル画面を作成する~

こがしぱんです。

 

前回は「新しいシナリオファイルを作成する」をやってみました。

 

今回は「タイトル画面を作成する」をやっていきます!

 

ついに、タイトル画面!ゲームの顔となる部分ですね!

ティラノビルダーでは、どんな風にカスタマイズできるのか...!

さっそく、やってみましょう!

 

まず、左エリアの「シナリオ」タブをクリック。

 

「シナリオ」タブの中にある「title_screen」をダブルクリック。

 

シナリオエリアに↓画像が表示されました。

あんまり今までのシナリオファイルと変わらないかな?

チュートリアルによると、ゲームが始まるとこの「title_screen」が最初にシナリオファイルとして読み込まれるらしいです。

作成の仕方は今までのシナリオファイルと変わらないらしいので、安心して取り組めそう!

 

試しに、「はじめから」「つづきから」ボタンをカスタマイズしてみましょう!

 

まず、チュートリアルから、↓2つのボタンの画像をダウンロード。

 

左エリアの「画像ボタン」を「はじめから」と「つづきから」の下にドラッグ&ドロップ

 

画像ボタン入りました!

 

次に、パラメーターエリアで先ほどダウンロードした「はじめから」「つづきから」ボタンを取り込みます。

 

取り込みました!

 

次に分岐ボタンのパラメーターエリアの「ストレージ」と「ターゲット」に記載してある内容を画像ボタンにも同じように記載します。

 

まずは、「はじめから」ボタンから。

分岐ボタンのストレージは「title_screen」、ターゲットは「*start」なので、画像ボタンのパラメーターエリアでも同じにしていきます。

 

「つづきから」ボタンも同じ様にしていきます。

 

そして、分岐ボタンの縦と横位置の数値を画像ボタンにも同じく記載して、分岐ボタンを削除します。

 

よし、保存して、プレビュー!

 

おおおー!できてます!

めちゃめちゃ手軽にボタンのカスタマイズできますね!

 

ということで今回はここまで!!

 

今回は「タイトル画面を作成する」をやってみました!

ボタンカスタマイズ以外にもタイトル画面で音楽を流したり、注意書きを表示させたりなど色々盛り込みできるみたいなので、いずれは豪華にしていきたい...!

 

次回もゲーム制作やっていきます!