こがしぱんるーむ

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

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

こがしぱんです。

 

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

 

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

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

 

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

 

前回は「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」なので、画像ボタンのパラメーターエリアでも同じにしていきます。

 

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

 

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

 

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

 

おおおー!できてます!

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

 

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

 

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

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

 

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

 
 
 

ティラノビルダー始めました~新しいシナリオファイルを作成する~

こがしぱんです。

 

前回は「音楽・効果音を鳴らす」をやってみました。

 

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

 

改めて、作成したものを見ると結構シナリオが長くなってきた感じがしますよね!

そこで、今回は、ストーリーのきりのいい場所で別のシナリオファイルに移動することをやっていきます!

 

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

 

左エリアが↓画面のようになるので、

 

「シナリオ追加」をクリック。

 

「新規シナリオファイル作成」という画面が表示されました。

 

シナリオの名前を付けていきます!

 

ここは、チュートリアルに沿って「urayama」にして、作成をクリック。

ゆうこちゃんとの裏山編がはじまる...!

 

作成ボタンを押すと、新しく「urayama」という字が左エリアと上の方に出てきています!

ここが裏山編のシナリオになるんですね!

 

それでは、これまでの経験を生かして裏山編作成していきましょう!

とりあえず、チュートリアルのサンプルキャプチャ通りに作成します。

 

まず、scene1からの飛び先を決めるために「ラベル」をドラッグ&ドロップ。

 

ラベル名を「start」。

 

次に、「背景変更」をドラッグ&ドロップ。

 

背景を選んでドラッグ&ドロップ。

とりあえず「title.jpg」を選択し、ダブルクリック。

 

背景完了!

 

次に、「キャラクター登場」をドラッグ&ドロップ。

 

ゆうこちゃんを選択し、ダブルクリック。

 

ゆうこちゃんも入りました!

 

次は、テキストを入力していきます。(テキストはチュートリアルのものを使用しています。)

主人公めっちゃぶっきらぼう!!
こんな口調だったっけ...笑

 

次は「ゲーム停止」をドラッグ&ドロップ。

 

裏山編は、こんな感じになりました!

 

そして、scene1の最後から「urayama」シナリオにジャンプさせないといけないので、scene1に戻ります。

「scene1」タブをクリック。

 

保存せずにscene1をクリックすると↓の注意書きを出してくれます。優しい!

 

次にscene1の最後にシナリオとジャンプを追加します。

scene1の「common」の下に「テキスト」「キャラクター登場」「ジャンプ」「停止」を追加しました。

 

テキストを入力していきます。(テキストはチュートリアルのものを使用しています。)

主人公が俺様キャラだ笑

 

次は、シナリオエリアのジャンプタブを左クリック。

 

パラメーターエリアに↓が表示されます。

 

ストレージに「urayama」、ターゲットに「*start」が表示されるので選択。

これで「urayama.ks」というシナリオファイルの「*start」ラベルにジャンプするという操作になるそうです!すごい!

ストレージで飛ぶ先のシナリオファイルを指定して、ターゲットでストレージで選択したシナリオファイルのどこに飛ぶのか指定するみたいなイメージかな?

 

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

 

おおー!ちゃんと移動できてたけど、背景画像を適当に青空にしたから裏山じゃない笑

 

あと、プレビュー見てて思ったんですけど、

主人公が最初の時と口調が全然違う笑

こんな短期間でこんなにオラつくなんて...笑

でも、無事に移動できて良かったです!

 

公式によると一つのシナリオファイルに詰め込み過ぎると、サイズが大きくなりゲームの読み込みに時間がかかったり、動作が重くなったりするので適度に分割した方がいいらしいです。

 

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

 

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

シナリオファイルを分けた方が見やすいし、読み込みも軽くなるので、区切りのいいところでは分けていきたいですね。

 

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

 
 

ティラノビルダー始めました~音楽・効果音を鳴らす~

こがしぱんです。

 

前回は「選んだ選択肢の分岐に入る」をやってみました。

 

今回は「音楽・効果音を鳴らす」をやってみます!

 

「音」って重要ですよね!

音があるだけで場面の臨場感が高まったり、ほのぼの癒されたり...。

 

そんな重要な「音」ですが、ティラノビルダーではどのように組み込んでいけるのか!さっそくやっていきましょう!

 

まずは、BGMの用意。

チュートリアルによると以下サイト様からフリー素材をお借りしてるので、同じ様に場面に合いそうなフリー素材をお借りします。

dova-s.jp

 

私は、この曲をお借りしましたー!

dova-s.jp

ほのぼのしてていいですねー!日常を感じられる...!

 

そして、ゲームでBGMを利用するために、「mp3形式」から「ogg形式」へ変換が必要らしいです。

「mp3」はよく聞いたことありますが、「ogg」は聞きなれない...。

 

まず、oggについて調べていきます!

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

soundengine.jp

aprico-media.com

 

oggは、データが軽い、ライセンス制限が緩やか、ゲームの音声ファイルによく利用されているみたいな感じかな?

イメージ的にゲームで利用する時の音声ファイルがmp3の時は、oggに変換しようぜ!的な。

 

それでは、さっそく、mp3をoggに変換してみましょう!

※ティラノビルダーV2.0 以降はmp3形式に対応(公式チュートリアルより)。

 

以下サイト様のオンラインコンバーターを使用します。

convertio.co

 

mp3からoggへ変換しました!

 

素材も準備できたので、ティラノビルダーへ組み込みしていきます!

 

BGM再生のタイミングですが、チュートリアルに沿ってゆうこちゃんが登場したところから再生するようにします。

 

左エリアのメディアタブから「BGM再生」を確認。

 

シナリオエリアの「キャラクター登場」の下に「BGM」をドラッグ&ドロップ。

 

追加されました。

 

そして、パラメーターエリアにBGMが設定できる画面が表示されます。

 

ファイル選択をクリック。

 

オーディオファイル選択画面が出てきます。

なんか、既に音楽ファイルが入ってました笑

公式様が入れてくれてたのかな?

 

一旦、×閉じで消して、先ほどダウンロードしたoggファイルを選択して追加。

 

音楽ファイルをダブルクリック。

 

音楽ファイル入ってますね!

 

さっそく、保存してプレビュー!

 

鳴りました!!

ゆうこちゃんが登場したタイミングで、バッチリ日常系BGMが!

やったーーー!!

 

効果音についても、やり方はほぼ同じです。

左エリアからドラッグ&ドロップするものが「BGM再生」から「効果音再生」に代わるだけみたいです。

試しにやってみます!

 

左エリアのメディアから「効果音再生」を確認。

 

ドラッグ&ドロップで設置

 

そして、パラメーターエリアでファイル選択して設定!

効果音もBGMと同じやり方で設定できるのでいいですね~!

 

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

 

今回は、「音楽・効果音を鳴らす」をやっていきました。

音がつくと一気に雰囲気が広がる感じがしますね!

 

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