memo

ゲーム制作やデザインについての個人的メモ

ティラノスクリプトでRPGっぽい戦闘デモをつくってみた

f:id:onigirimgmg:20160819031755p:plain

とりあえずゲームをやってみてくれ。な?
http://nanayen.web.fc2.com/browser_2016819_2058/index.html

※Windows10/Chrome最新版で動作確認しています
※効果音が鳴りますので音量にご注意ください

ティラノのゲームをブラウザで公開したのは初めてなのでなんか不具合とかあったら教えてくださいー。びっくりするほど簡単に公開できて驚きだぜ。

単純なターン制バトルです。オバケくんをクリックで殴ると殴り返されます。赤がHPなのでこれがなくなると負け(相手のHPが表示されてないのは仕様です)。緑はスキルゲージで、攻撃するごとに溜まっていきます。満タンになるとスキル(強い技)が使えます。アイテムとスキルをフルで使えば確実に勝てるレベルです。

 

というわけでティラノスクリプトRPGの戦闘(もどき)です。ティラノはノベルゲームやアドベンチャーゲームに特化した本当に簡単で使いやすいツールですが、私はRPGが好きなのでどうにかそれっぽいものを捻じ込みたかったのです。

で、どうせつくるならちょっと動きのある見た目にも楽しい感じのやつつくりたいじゃん?と思い、色々いじくってたらとても楽しかったというご報告ですよ。

 

まず考えたのは、攻撃時にちょっとしたアニメーションを入れたいなあ、という部分です。これはキーフレームアニメーションを使いました。女の子はジャンプして上から振り下ろすイメージで、オバケくんはオバケらしく(?)ススス……と移動する感じです。このへんの動きはセンスの問題なのであまり突っ込まないでやってください。キーフレアニメすげーよ!ってことだけ言いたかったんです。

[keyframe name="ジャンプ"]
[frame p=0% y=20]
[frame p=70% y=-500 opacity=0]
[frame p=90% y=100 x=-300 opacity=255]
[frame p=100% opacity=0]
[endkeyframe]

↑これが女の子の動きで、

[keyframe name="横すべり"]
[frame p=100% x=500 opacity=0]
[endkeyframe]

↑これがオバケくんの動きです。

あと攻撃時のエフェクトみたいなやつもキーフレアニメです。

[keyframe name="攻撃エフェクト"]
[frame p=100% scale=2 opacity=0]
[endkeyframe]

2倍の大きさに拡大しつつ透明にして最後は消える、って感じですね。

本当はは攻撃時と被ダメージ時のイラストも別にあればよかったのですが、とりあえず一通り完成させるのが目的だったので省略しました。

 

次に考えたのが、ダメージ数の表示です。コマンド式RPGではよく「敵の攻撃!勇者に〇〇のダメージ!」って表示されてるやつですが、今回はなるべく文章を使わないようにしていたので、ダメ数のみさっと表示させる方式にしました。

普通に表示させてもよかったのですが、なんとなくダメ数ってふわ~って出てくるイメージだったのでこれもアニメーションを使えばなんとかなるかな?と考えていたのですが、リファレンスを眺めているときに見つけてしまいました。

mtext】←クリックでリファレンスに飛びます

mtextは演出効果を持ったテキストを表示できるタグです。とりあえずアニメーションサンプル(http://tyrano.jp/mtext/)を見てみてください。すげー!タグを書くだけでこんなにかっこいい文字が表示できるなんてすげー!

色々活用できそうでわくわくするタグですが、今回はダメ数の表示という地味な部分に使いました。でもそれっぽくなったんじゃないかな?

[mtext layer=4 text="&tf.乱数" size=20 x=300 y=200 color=white in_effect=fadeInDown out_effect=fadeOutDown time=1 in_sync=ture out_sync=true]

tf.乱数がダメ数です。各要素の詳細はリファレンスを参照してください。

 

次は単純にボカスカ殴り合うだけじゃなく、通常攻撃以外の要素も入れたいなあと思いました。ここはRPG的に魔法を入れたいところですが、あんまりファンタジーな雰囲気じゃなかったのでスキルにしました。スキルってなんやねん。

スキルを使うにはスキルゲージを溜める必要がある。スキルゲージは攻撃をするたびに溜まる……ってとこまで 考えたのですが、そもそもゲージってどうやってつくればいいんだ?

答えはいつもお世話になっているティラノスクリプト製作テクニックwikiさんにありました。このページです。

tyrano.wiki.fc2.com

横1pxでつくった画像を数値の割合に応じて伸ばして表示する、というのは目からウロコでした。すごいなー。

[image storage="base.png" layer=0 x=570 y=400 width=106 height=11 visible=true]
[image storage="skill.png" layer=1 x=573 y=400 width="&tf.スキルゲージ量" height=11 name="スキルゲージ" visible=true]

これでゲージが表示できます。増減もばっちり反映されます。

でも私は欲を出してしまいました。にゅーっとスムーズな動きでバーの長さを増やしたり減らしたりしたいなあ……。ド素人がなに言っとるんじゃい、って感じですが、動かせるもんなら動かしたいですよね?

ここで【anim】タグの登場です。こちらはキーフレアニメと比べて比較的単純なアニメーションのときに使うのだと思いますが、今回やりたいことにぴったり。

[image storage="skill.png" layer=1 x=573 y=400 height=11 name="スキルゲージ" visible=true]
[anim name="スキルゲージ" width="&tf.スキルゲージ量" height=11 time=200]

 横幅だけanimタグで管理してます。こうすると増えたり減ったりするときにスムーズにバーが動きます。最初はうまくいかなかったんですが、いじくりまわしてる内になんとかなりました。スクリプトはぐちゃぐちゃです。

HPゲージも同じようにつくりました。こっちは残りHPによって色分けされてたほうがわかりやすいんだろうなーと思いつつ今回は単色です。

スキルは攻撃のたびにランダムで数値が加算されていく仕組みになっています。100以上になると右側にスキルボタンが出現し、スキルが使えるようになります。スキル発動のときのチャージ演出(円が出現してスキルゲージを消費しながら大きくなっていくやつ)が結構お気に入り。

 

あとはなんだろ……敵シンボルクリックで攻撃にしたのはスマホだとその方が操作しやすいかなあと思ったからです。でも他のボタン(アイテムと逃げる)が普通に右側にあるのでちぐはぐな感じにもなってるなあ。もっと直感的に操作できるインターフェイスを目指したいです。

今回のスクリプトは上から順番に書いて試して書き足して、ってやっていったせいで変数とかレイヤとか本当にぐっちゃぐちゃなので実用性は皆無ですが、なんとなーくこうやればできるのかな~っていうのはわかったので、制作中のゲームにいかしたいです。ADV+RPG風戦闘、って感じのゲームになるのかなあ。一周一時間くらいの規模にしたい。

 

全然関係ないんですが、最近ノートパソコンのHDDがお亡くなりになったので人生初のSSD換装してみました。起動もインターネットも速すぎてわけわかんないです。今までやってた艦これは艦これじゃなかったみたいです。PC起動中にポケとるを一面だけやる、というお楽しみがなくなったのは非常に残念ですが、これで作業の方も少しでも速くなればいいな~と思ってます。がんばろー。