こがしぱんるーむ

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

ティラノスクリプト~拡張現実(AR)機能_カメラ映像編

こがしぱんです。

 

前回は、新年のあいさつでしたが、今回からまたティラノスクリプトの学習に戻っていきます!

 

前々回は「キーフレームアニメーション」をしました。

kogashipanroom.hatenablog.com

 

今回は、「拡張現実(AR)機能~カメラ映像~」です!

 

AR機能ってすごくない!?

ノベルゲームでそこまでできるの!?って感じで衝撃です...。

 

ということで、さっそく内容を見ていきましょう!

 

ティラノスクリプトのAR機能について・・・

※この機能はティラノスクリプトV5以上が必要です。

ティラノスクリプトV5ではAR機能が追加されています。
例えば、スマートフォンでゲーム画面にカメラの映像を背景に流して、キャラクターと2ショットを取るようなゲームが簡単につくれます。

(公式より引用)

 

例えば、ポケモンGOのARモードとか、

(引用元:AR+モードでポケモンを捕まえる — Pokémon GOヘルプセンター


デレステなど、色々なソシャゲで使われてますね。

(引用元:バンナム、『デレステ』のフォトスタジオに「ARスタジオ」を追加! 端末のカメラを通じて日常風景にアイドルが登場 | gamebiz

 

実際に公式の動作サンプルがあったので確認。

tyrano.jp

 

カメラを「許可」にすると、

 

カメラオンにしてないから、青背景なんですけど、オンにすると現実の背景が表示されるみたいなイメージ。

 

あかねちゃんが入ると、こんな感じ!

 

 

エフェクトもかけれる...だと!?

 

桜エフェクト。

 

雨エフェクト。

 

回想エフェクト。

などなど。

 

そして、カメラを特定位置に配置することも可能とのこと!

 

す、すごい...。

 

さっそく、AR機能に挑戦!!

 

■背景にカメラ映像を表示する

背景にカメラの入力を表示するには[bgcamera]タグを使用します。

↓が公式のサンプルコード。

 

前回のアニメーションコードの下にコピペ。

 

実行!!

おおーー!正常に動きました!

 

はじめて、カメラを使用する場合は、↓みたいなカメラの使用許可を求めるメッセージが表示されるらしいのですが、今回特になかった...。

1度、サンプルゲームで許可しちゃったからかな?

 

1度許可すれば2回目以降メッセージが表示されることはありません。(同一ドメインのみ有効)ということらしいので、プレイヤーには、このアクセスを許可するようにアナウンスしておきましょう。

 

またブラウザゲームとして動作させる場合 「https:// 〜 」でアクセスできる場所にゲーム配置しなければなりません。

 

次は、[bgcamera mode="back"]のコードについて内容確認。

modeパラメータは front back が指定できます。何も指定しないと端末のデフォルトカメラが選択されます。
背面カメラを使用したい場合はback。前面カメラを使用したい場合はfrontを指定します。

 

■カメラ映像の位置を調整する

通常は背景前面に表示されますが、座標と幅を指定することもできます。

 

公式のサンプルコード確認。(↓)

 

サンプルコードをコピペして、実行!

画面の中にカメラ映像がある!!

このように、位置と幅を指定すると、画面上の特定領域にカメラの映像を流すこともできるんですね!すごい!

 

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

今回は「拡張現実(AR)機能~カメラ映像~」をやってみました。

 

ノベルゲームでAR機能が自分で実装できるのってすごいですね!

ゲームの幅が広がりそう...!

 

次回もティラノスクリプトやっていきます!

あけましておめでとうございます!!

新年、あけましておめでとうございます!!

 

今年もよろしくお願いいたします!!

 

2026年ですね!

 

去年はあんまりブログ更新できなかったので、今年こそはプログラミングについてもっと定期的に更新していきたい...。

 

いや、更新してみせる...!!

 

改めて、今後ともよろしくお願いします。

ティラノスクリプト~キーフレームアニメーション~

こがしぱんです。

 

前回は「CG・回想モードをつくる_回想モード編」をしました。

kogashipanroom.hatenablog.com

 

今回は「キーフレームアニメーション」です!

 

キーフレームアニメーションとは・・・

アニメーションのフレームごとに、要素の位置や状態を定義することで 複雑なアニメーションをシンプルに実現することできる機能です。

(公式より引用)

 

分かるようで分からない!

 

ということで、実際にサンプルで動きを確認。

tyrano.jp

 

つまり、キーフレームアニメーションっていうのは、キャラクターを上下左右に動かせるってことですね!(↓公式サンプルより)

 

それでは、動かすためのサンプルスクリプトを確認。

 

まず、[keyframe][endkeyframe]タグの中で、アニメーションの動きを定義する。

[frame]タグの中でパラメータ「p」に指定したパーセンテージの位置で、物体がどのような状態にあるかを定義していく。

 

【その他のパラメータータグ(サンプルに記載してある分紹介)】

p → キーフレームの位置をパーセンテージ(0%〜100%)で指定します。たとえば50%と指定すれば、全体の長さが4秒のアニメーションのなかの2秒目、となります。0%のキーフレームを省略することで前回のアニメーション状態を継承できます。

 

x → X軸方向へのアニメーション量をピクセル単位で指定してください。*(アスタリスク)で始めることで、絶対位置として指定できます。

例) x="100"(前へ100px移動する)、x="*100"(画面左端から100pxの位置へ移動する)

 

y → Y軸方向へのアニメーション量をピクセル単位で指定してください。*(アスタリスク)で始めることで、絶対位置として指定できます。

 

rotate → 対象を回転させることができます。たとえば180度回転させたい場合、180degのように指定します。

 

wa → 実行中のアニメーションすべて終了するまで処理を待ちます。

 

最後に[kanim]タグで、アニメーションさせたい対象のnameと、キーフレームアニメーションの種類を指定することで、アニメーションが開始されます。

アニメーションにかける時間などもあわせて指定します。

 

さっそく、サンプルにスクリプトに当てはめていきましょう!

 

 

サンプルにあった「ミク」を全て「あかね」に置き換えてます。(↓)

[chara_new name="miku" storage="miku1.png" jname="ミク"]

→[chara_new name="akane" storage="chara/akane/normal.png" jname="あかね"]

 

[chara_show name="miku" wait=true]

→[chara_show name="akane" wait=true]

 

今回は、↓のタイミングでアニメーション実行文を入れてみます。

 

さっそく、実行!

う、動いてるーーー!

 

キーフレームアニメーション無事動きました!

おや...?

これ、最後のアニメーションの動きの状態のままリセットされずに位置がそのままだ!

上半身だけ浮かんだ状態で終わってしまう!!

 

キーフレームアニメーションのリセットとかないのかな?

色々調べましたが見つけ切れなかった…。

なので、数値をイジッて初期位置に戻してみたいと思います。

x、y、rotateを全て0にした定義文を追加してみました。

 

名前は「”animation2”」

 

実行スクリプトも追加。

 

実行!

 

めっちゃ動きゆっくりだったけど、とりあえず初期位置に戻ったので解決!

 

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

今回は、「キーフレームアニメーション」をやってみました。

 

このキーフレームアニメーションを使えば、キャラの動きに凝った演出とかできそうですね!

最初に定義してしまえば、後は使い回しできますし、これは使いこなしていきたい…!

 

次回もティラノスクリプトやっていきます!

ティラノスクリプト~CG・回想モードをつくる_回想モード編~

こがしぱんです。

 

また…空いてしまった…3か月くらい…

頑張ります…。

 

前回は「CG・回想モードをつくる_CGモード編」をしました。

kogashipanroom.hatenablog.com

 

今回は「CG・回想モードをつくる_回想モード編」です!

 

さっそく内容チェック。

 

現在の回想は↓の様になっています。

未登録の回想が2つ配置されている状態です。

 

まずは、回想したいシーンを登録していきます。

設定方法は回想シーンとして登録したいシナリオ部分を

[setreplay]

[endreplay]

で囲うだけです。

 

簡単な感じする!!

 

それでは、文化部に移動するシーンの回想スクリプトを作成してみます!

 

公式に沿って作ってみました!

回想するシーンはここ↑

 

まず、回想したいシナリオの前に

[setreplay name="bunka_scene" storage="scene1.ks" target="bunka_scene_label"]

*bunka_scene_label

を入れる。

 

name=”〇〇”は回想シーンの名前で、後で紐付けるために使用します。

storage="scene1.ks"は、scenarioフォルダからの表示させるシナリオがある場所。

target="○○_scene_label" は回想シーンを始めたいラベルの位置です。

 

最後に[endreplay]を入れる。

 

次に回想シーンの画面設定です。

 

回想画面が設定されているscenario<replay.ks ファイルを開く。

 

開いてみると↓の感じで色々入ってる…。

 

1つの回想を表すボタンは [replay_image_button]タグらしいので、そのタグが書かれている場所を探します。

下の方にスクロールしていくとあった!

表示が小さいので文字で書くと、

*page_0

[replay_image_button name="replay1" graphic="cat.jpg" no_graphic="../../tyrano/images/system/noimage.png" x=60 y=130 width=160 height=140 folder="bgimage" ]

[replay_image_button name="replay2" graphic="toile.jpg" no_graphic="../../tyrano/images/system/noimage.png" x=260 y=130 width=160 height=140 folder="bgimage" ]

です!

 

「no_graphic」ってあるからこれのはず!

 

先ほど指定しておいたnameを設定します。

デフォルトでは「replay1」になっているので、「bunka_scene」に変更。

 

次に、回想のサムネシーンの設定。 

デフォルトが「graphic=”cat.jpg”」になっているので「graphic=”bunka.jpg”」に変更

 

これで回想シーンの設定は完了!

 

それでは、ゲームを開始して文化部のシーンを通過してみましょう。

文化部のシーンを通過しました!

 

これで、タイトルに戻って回想モードを押す。

おおおーー!サムネが表示されてる!

 

次は、クリックして回想されるかどうか…。

文化部の背景が表示されただけで、何も進まねぇ!!

 

何でーーー!

公式の使い方を見てみると、↓が抜けてた!

これは一体どういったスクリプトなんだ…!

 

ということで、公式の内容を確認。

まず、[if exp="tf.system.flag_replay==true"]の部分。

 

これは、回想モードから来た場合 tf.system.flag_replay という変数にtrueが格納されています。
回想モードの時にだけ実行したい処理で、メッセージ枠を表示しています。

すなわち、回想画面からジャンプしてくるのでシナリオの最初に記述されているメッセージの設定などが実行されないからです。

そのため、回想から来た場合のみメッセージの設定をやり直しているのです。
キャラクターの定義なども、同様に注意が必要です。逆に回想の時は実行したくない処理などを排除することもできます。
(公式より引用)

ちょっと宇宙猫状態になったんですけど、つまり、回想モードから入る場合にはメッセージ枠の位置とかキャラの位置とかを再度スクリプトに書いてくださいってこと...!?

 

シナリオモードと違って真っすぐ回想モードから入るから、メッセージ枠とかキャラの定義とか読み込んでない状態だもんね…。

 

とりあえず、再設定!

赤枠がメッセージウィンドウで青枠が文字の設定です。

 

一旦、この状態で回想してみましょう!

回想はされたけど、あかねちゃんが消えている…。

 

うーん、キャラも再設定しなきゃですね。

必要そうな部分だけ入れてみた!

 

再生!

回想終わったのにあかねちゃんが消えない…!

 

何故だ…。

色々とたくさん調べた結果!

↑(赤枠)を入れればいいということが分かりました!

めっちゃ苦労した…。

 

さっそく、回想を再生。

ちゃんとあかねちゃんが消えてくれました…!

問題は解決!

 

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

今回は、「CG・回想モードをつくる_回想モード編」をやってみました!

 

回想部分を再度設定し直さないといけないのがちょっと手間かも。

もっと簡単にできそうな気がする…!いずれ色々模索していきたいところです。

 

次回もティラノスクリプトやっていきます!

ティラノスクリプト~CG・回想モードをつくる_CGモード編~

こがしぱんです。

 

またもや前回から3か月ほど空いてしまいました...。できれば月1は更新するように頑張ります!

 

前回は「システム画面をカスタマイズ_その2」をしました。

 

今回は「CG・回想モードをつくる_CGモード編」です!

※本機能を使用するには「ティラノスクリプトV400」以上でなければなりません。(公式より引用)

 

さっそく、内容の確認!

 

まず、ゲームのCGモードを確認してみます!


CGモードがない!!

 

いや、ない...というか、すっごく前にやった「文字を表示する」の段階でサンプルゲーム用のスクリプトを全て消している...!!

kogashipanroom.hatenablog.com

 

どうすればええんや!

 

そうだ、もう一度、サンプルゲームをダウンロードして解凍しよう!

ということで、ダウンロードするために公式サイトへ!

こちらからダウンロード可能です↓

tyrano.jp

 

私がやり始めた時は、「v523」だったのにいつの間にか「602c」まで出てる!!
今でもアップデートされてるのすごい...。

 

それでは、こちらの「Ver602c」をダウンロードして解凍!

 

そして、ティラノスタジオの「myprojects」フォルダに放り込みます。「TyranoStudio_win_std_v601a/myprojects/」

 

ティラノスタジオを起動すると、色々編集する前のティラノスクリプトのサンプルゲームが入りました!

「開発する」を押すとチェックマークが付きます。

 

起動してみると、「CGモード」があります!

 

前置きが長くなりましたが、公式に沿ってCGモードを作っていきましょう!

 

CGモードを押してみるとこんな感じ↓

初期画面では、閲覧していないCGが2つある状態で画像が配置されています。

 

さっそく、このCGモードに画像を設定していきます。

 

CGモードに登録するには、ゲーム中に画像を表示したタイミングで、「このCGを開放する」ことを宣言する必要があります。
その際に利用するのが [cg ] タグ です。

 

それでは、サンプルゲームを使って設定していきます。

 

まず、シナリオファイルを開きます。

「tyranoscript_v602c/data/scenario/scene1.ks」

 

サンプルゲームに既存のスクリプトが入っているので、会話文辺りから下を消します。

 

そして、今回は↓の背景を開放するCGとして使用させていただきます。

 

お借りした素材のサイトはこちら↓

min-chi.material.jp

 

↓(赤枠)のスクリプトに内容を編集しました。

 

あかねちゃんが文化部に行くタイミングで背景が変わるので、その時にCG開放を設定してみます。

 

[cg storage="bunka.jpg"]という記述を[bg storage="bunka.jpg" time="1000"]の下に追加します。

これで、「rouka.jpgファイルを見たよ!」という意味を持たせることができます。

 

次に、cg.ks ファイルを編集します。

(「tyranoscript_v602c/data/scenario/cg.ks」)

 

cg.ksファイルを開いて、その中に、

[cg_image_button graphic="rouka.jpg,room.jpg,title.png" no_graphic="../../tyrano/images/system/noimage.png" x=60 y=130 width=160 height=140 folder="bgimage" ]

という箇所があります。

(画像だと見えにく過ぎた...)

これが、CGモードの1つの画像を表します。

 

ここに、先ほど設定したCGと紐付けるために graphic=rouka.jpgを消して、graphic=bunka.jpg と記述します。

 

以上でCGモードの設定は完了です!

 

さっそく、設定されているか確認。

シナリオが短すぎて、右下のボタンを押せないよ!

もっと長くしないとダメなのか...。

 

というわけで、教室に戻るまでの流れに変えましたー!

 

再度、実践!

文化部の背景が出たタイミングで、右側のメニューボタンをクリック。

 

タイトル画面に戻ります。

 

CGモードを確認すると、解放されていました!

何故か、普通の教室の背景も解放されている!

なぜだ...。

 

細かい部分は後々考えることとしましょう!

 

そして、「cg.ks」ファイルに記載されていた「cd_image_button」のパラメーターについて以下まとめ。(公式より引用)

graphic="○○.jpg" (cgタグで開放される画像、○○に表示したい画像名)
no_graphic="noise.jpg" (未開放の時に表示する画像)
x=60 (X座標位置)
y=100 (Y座標位置)
width=160 (画像ボタンの横幅)
height=140 (画像ボタンの高さ)
folder="bgimage"(画像の配置されているフォルダ)
 
ということで、今回はここまで!
 
今回は「CG・回想モードをつくる_CGモード編」をやってみました。
ADVゲームで馴染み深いCGモードがこんな風に作られてるんだな~というのが、実際に触れてみてより実感できた気がします!!
 
最近は、期間が長く空いての投稿ばかりですが、これからもプログラミング勉強記事を投稿していきます!
 
プログラミング系のアドバイスとかありましたら、どんどんいただけると嬉しいです!
 
次回もティラノスクリプトやっていきます!

ティラノスクリプト~システム画面をカスタマイズ_その2~

お久しぶりです。

こがしぱんです。

仕事がめちゃめちゃ忙しくて前回からかなり空いてしまいました...。すみません...。

 

前回は「システム画面をカスタマイズ_その1」をしました。

(量が多かったので、その1とその2で分けることにしました。)

 

今回は、「システム画面をカスタマイズ_その2」です!

 

さっそく、確認!

 

■メニュー画面・セーブ・ロード画面のカスタマイズ

各種画面のカスタマイズ方法の確認です。

メニュー画面では、プロジェクトフォルダの「tyrano/images/system」の中にある以下のファイル画像を自分の好きな画像に置き換えることでカスタマイズ可能です。

 

試しに↓(赤枠)の戻るボタンを変更してみます。

 

使用する画像はこちら。↓

 

ACillust様からお借りしました。

www.ac-illust.com

 

画像名を「menu_button_close」に変更してます。

 

まず、この画像を「tyrano/images/system」の中に保存、既存の画像と置き換えます。

 

そして、ゲーム再生!

ちゃんと画像置き換わりました!

 

※画面サイズによっては、セーブデータが見切れてしまうことがあるかもしれません。その際は 「tyrano/tyrano.cssをひらいて、以下の部分を調整してください。

(公式より引用)

多分、↓に書いてる辺りのことだと思う...。見切れた時はここら辺の数値を調整すればいいのかな?

 

■各種画面の配置を調整する

画像だけでなく、各要素の配置方法を変えることもできます。
※簡単なHTMLとCSSの知識が必要になります。

セーブ画面やメニュー画面などは、HTMLCSSで表現されています。
【プロジェクトフォルダ】/tyrano/html/にHTMLファイルが配置されており、編集することですべて作り替えることが可能です。(公式より引用)

 

実際にフォルダを開いてみると↓の感じです。

backlog.htmlバックログの画面
load.html:ロード画面
menu.html:メニュー画面
save.html:セーブ画面

 

デフォルトだと開くプログラムがchromになってるので、VScodeに切り替えて「backlog.html」を開いてみます。

HTMLとCSSの知識がないとさっぱり過ぎる!

 

うーん、ここら辺はちゃんと知識を付けてから見た方が理解度深まりそうなので、一旦置いときます。

 

■画面上に常に機能ボタンを表示する

ゲームの画面上にスキップボタンやセーブボタンなどを↓の様に設置したい場合。

(公式より引用)

まず、標準で表示されるシステムボタンは不要なので、config.tjsの「;configVisible」をfalseにしておきます。

 

次に、ボタンをゲーム開始時の共通部分(first.ks)に記載します。

記載内容は以下画像の通り(公式より引用)。

 

今回出てきた「role」タグについて。

button タグに roleパラメータを指定することで、特別な機能を持ったボタンを配置することができます。

指定できるキーワードは以下のとおり。(公式より引用)
save:セーブ画面を表示
load:ロード画面を表示
title:タイトル画面に戻る
menu:メニュー画面を表示
window:メッセージウィンドウの非表示
skip:スキップモードを開始
backlogバックログを表示
fullscreen:フルスクリーン切り替え
quicksave:クイックセーブ実行
quickload:クイックロード実行
auto:オートモード開始
sleepgame:ゲームの状態を保存してジャンプ

 

ということで、first.ksに貼り付けて実践!

表示されない...!!

 

よくよく見たら拡張子が「.gif」になってますね。

 

ちゃんとフォルダにある画像名に変えて...

実践!

表示されましたーー!(見えづらいですが...)

 

位置調整して...、

 

それっぽくなりましたね!

※ゲームをセーブして、ロードしたときにボタンが表示されているかを確認!

 

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

 

今回は「システム画面をカスタマイズ_その2」をやってみました。

メニュー画面やセーブ、ロード画面を自分好みにカスタマイズできたら楽しそう...。

しかし、HTMLとCSSの知識がいる!

ティラノスクリプトに一区切りついたら勉強していきたいなと思います。


次回もティラノスクリプトやっていきます!

ティラノスクリプト~システム画面をカスタマイズ_その1~

こがしぱんです。

 

前回は「サブルーチンとマクロ」をやってみました。

 

今回は「システム画面をカスタマイズ_その1」です!

 

ティラノスクリプトは、標準でセーブ画面やロード画面といった システム周りの機能が付属しています。

 

例えば、↓画面の赤枠部分を押すと、

 

↓のメニュー画面が表示されます。

このようにデフォルトで必要な機能が設置されている状態です。

 

そして、ティラノスクリプトではかなりの自由度でシステム周りの画面をカスタマイズすることができるとのことなので、さっそく確認!

 

まず、ゲーム全体に影響する設定は、「Config.tjs」というファイルを編集して設定します。

ファイルの場所→[プロジェクトフォルダ]/data/system/Config.tjs

 

ファイルの中身は↓の感じで、ファイル自体に詳しい解説が書いてありますので参考にしながら作成することができます。

 

特に重要な項目としては以下の様な設定がConfig.tjsで行えます。(公式より引用)

・タイトルの設定→ブラウザやアプリのウィンドウに表示される)

・projectID→同一ホストから複数ゲームを配信する場合、ここを一意にする必要があります)

ScreenRatio→ゲーム画面を画面サイズに合わせて拡大するか、比率を保つかといった、画面調整に関する設定をおこないます
scWidth scHeight →画面サイズを設定します
メニュー機能の表示や位置指定
バックログの最大ログ保持行数
通過記録の設定
デバック機能の有効化(※リリース時は必ずオフにする設定を行わなければなりません。)
禁則処理の設定

などなど...。

こちらは一部の主な設定部分になりますので、他にも様々な設定が可能です!

 

それでは、さっそくメニュー画面表示ボタンのカスタマイズについて。

 

(上で使用した画像と同じになりますが)デフォルトのメニューボタン位置は、画面右下に設置されています。(↓)

 

セーブ、ロードなどノベルゲームに必須の機能が備わっています。

 

ティラノスクリプトでは、メニューボタンの表示位置や画像の変更から、独自のボタンからセーブ・ロード機能を呼び出すところまで変更することが可能です。

 

さっそく、実践!

 

■メニューボタン表示の画像を変更する

メニュー画面を呼び出すためのボタン画像を変更する時は、既にあるデフォルトのボタン画像を別のボタン画像に置き換えることで変更が可能です。

 

デフォルトのボタン画像の場所

→[プロジェクトフォルダ]/tyrano/images/system/button_menu.png

例えば、この画像を↓の画像に置き換えます。

 

素材はこちらからお借りしました!(↓)

kopacurve.blog.fc2.com

 

画像名を「button_menu」に変更。

これで、実行してみると、

サイズがでかい!!

あまりにもでかすぎた...。

ということで、サイズ調整。

ちゃんと表示されました!

こんな感じで好きな画像に変更することができます。

 

■メニューボタンを非表示にする
メニューボタンは非表示にすることができます。


まず、プロジェクトフォルダの /system/Config.tjsファイルを開く。

 

下にスクロールすると、↓の内容が記載されている箇所があります。

 

このconfigVisible = true true部分を(↓)

 

falseに設定します。(↓)


上書き保存して、実行!

おおおおお!!メニューボタンが非表示に!!

 

また、configLeftconfigTopの両方を指定した場合、

好きな位置へメニューボタンを表示することができます。

 

例えば、configLeftを「1」

configTopを「1」にすると、

↓のように位置が変更になりました。

すごい左上...。

このようにconfigLeftとconfigTopの数値をいじるとメニューボタンの位置調整ができます。

 

また、セーブの画像やロードの画像、その他メニュー画面の画像についても、(↓)

既にある画像を自分の好きな画像に置き換えれば、自分だけのメニュー画面にカスタマイズできます!

 

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

 

今回は「システム画面をカスタマイズ_その1」をやってみました。

まだ、メニューボタン部分しかいじっていませんが、すごくカスタマイズしやすい印象です!

既にデフォルトで設置してあるのが大きいかもしれない...。

 

次回もティラノスクリプトやっていきます!