セーブ時に好きな文字を入れる byティラノスクリプト

今回は、セーブした時の文字を、変数にします。
「生存1日目」の文字は、ゲーム内で、「f.survival」という名前の変数で設定しております。

デフォルトだとどうなるのか

デザインはカスタマイズしていますが、こんな感じです。

・セーブした時間
・直近表示したテキストの文字
　→セーブ前は「まだ、保存されているデータがありません」と表示される。

今回作っているのは、
テキスト文字があまり出てこないので、
テキストの文字は表示せず、変数に置き換えます。

まずはsave.htmlを確認

「save.html」を見ましょう。

<span class='save_list_item_date'>{{:save_date}}</span>
<span class='save_list_item_text'>{{:title}}</span>

{{:title}}部分を何かに置き換えればいいんだな。という事が分かります。

とりあえずkag.menu.jsを変えればいい

色々どこを変更したらいいのか分からなかったのですが、
ブログを発見して、kag.menu.jsを変えればいい事が分かりました。
hororo.wp.xdomain.jp

this.snapSave(this.kag.stat.current_message_str,function(){
　　data=that.snap;
　　data.days = that.kag.stat.f.survival;　//この行に追加

data.days = that.kag.stat.f.survival;

・data.days
　→daysは何でもいいです。これだと{{:title}}を{{:days}}にすれば呼び出せます。
・that.kag.stat.f.survival
　→変数は何でもいいです。今回はf.survivalに「生存○日目」という文字を設定しています。

save.htmlを変更

data.daysの設定ができたので、save.htmlを変更します。

<span class='save_list_item_date'>{{:save_date}}</span>
<span class='save_list_item_text'>{{:days}}</span>

これでよし！

……だめだ、セーブ前が空欄になってしまう。

kag.menu.jsを変更

「まだ、保存されているデータがありません」の
文字自体を変えたい場合は、lang.jsで変えることができますが、
今回は、{{:days}にしたときに、「not_saved」が呼ばれるようにしないといけません。

結論から言えばkag.menu.jsを下記のようにすればいいです。

■変更前
json.title=$.lang("not_saved")；

■変更後
json.days=$.lang("not_saved")；

ここで注意ですが、変更して再読み込みしても、
全然変更されない事があります。
変更されない場合は、とりあえずプロジェクトIDを変えて見ると良いです。

Config.tjs

// ◆ プロジェクト一意の識別名称　ティラノスクリプト独自設定
// プロジェクト固有の文字列を指定してください。特に同一ドメイン上にプロジェクトを配置する場合は必ず指定してください
;projectID = ここを新しい奴に変える;

まとめ

ティラノスクリプトなのに、
あまりテキストが出てこないので、こうするしかなかったんだ！！

どうやれば結構悩んでいたのですが、
kag.menu.jsをどう変更したら良いか分かれば簡単にできました。

やはり調べることは大切である。

CordovaでティラノスクリプトのゲームをAndroidアプリ化

はじめに

ティラノスクリプトで作ったゲームをAndroidアプリ化しようと思って、
とりあえず公式をたどり手順通り進めてみた。

【2015年冬版】phonegapでアプリ化する（Android版） - シケモクテクノロジー

おっと、AndroidStudioからエミュレーター起動しても、
エラーがでて先に進まないぞ！
よし、違う方法を探してみよう！やってみよう！
で出来た方法の紹介となります。

基本的には、こちらのサイトを参考にし、
つまったところや、困ったところを補足している感じです。
Cordova - iPhone, iOSと Android 両方で動くアプリ開発環境 - DEblog

そもそもCordovaとはなんだ？

HTML+Javascripで作ったものを、ネイティブアプリにしてくれる、素敵なフレームワークだよ！
（ちょこっと調べましたが、よくわかんなかった）

ステップ①：Node.jsをダウンロード

下記からNode.jsをダウンロードします。

Node.js

ステップ②：JDKをダウンロード

JDK（Java SE Development Kit）をダウンロードします。
Java SE Development Kit 8 - Downloads

Accept License Agreement にチェックを入れて、
jdk-8u91-windows-x64.exeを押しましょう。
※Windows 64bitじゃない場合はご自分のPCに合わせてダウンロードしてください

ステップ③：ApacheのAntを導入

下記より【apache-ant-X.X.X-bin.zip】をダウンロードして解凍してください。
Apache Ant - Binary Distributions

私の解凍ツールでは、解凍時になにやらエラーが出ていましたが、
普通に進めることができました。

ステップ④：PATHを設定　その1

Android SDKを実行するため、PATHを設定します。
「システムの詳細設定」（「システムのプロパティ」の「詳細設定」タブ）より、
「環境変数(N)」ボタンを押してください。

ユーザー環境変数(新規追加)： JAVA_HOME
変数値(例)： C:\Program Files\Java\jdk1.8.0_91

ユーザー環境変数(新規追加)： ANT_HOME
変数値 (Pleiadesが入っている場合の例)： C:\apache-ant-1.9.7

ユーザー環境変数 [Path] を編集し、後ろに以下を追加
…… ;%JAVA_HOME%\bin;%ANT_HOME%\bin

JAVA_HOMEは「ステップ②：JDKをダウンロード」がインストールされた場所、
ANT_HOMEは「ステップ③：ApacheのAntを導入」で解凍したフォルダを置いた場所（悩んだらC直下で良いと思います）を設定します。

[Path]はすでに変数値が入っていると思うので、一番右に、「;%JAVA_HOME%\bin;%ANT_HOME%\bin」を追加してください。

ステップ⑤：Android Studioのダウンロード

下記よりAndroid Studioをダウンロードしてください。
重たいので容量の空いてるところにダウンロードをお勧めします。50GBはもっていかれました。
Download Android Studio and SDK Tools | Android Studio

Intel HAXMがインストールされていない場合は、エミューレーターが実行できないそうなので、

・Android studioを起動
・[Tools]-[Android]-[SDK Manager] を選択
・SDK Tools のタブを選択
・「Intel x86 Emulator Accelerator(HAXM installer) 」にチェックを入れて Applyを押す

・ intelxaxm-android.exeを起動してインストール
・AndroidStudioを閉じる

こちらのサイトの「AndroidStudioのインストール」が分かりやすいです。
【2015年冬版】phonegapでアプリ化する（Android版） - シケモクテクノロジー

ステップ⑥：Cordovaのセットアップ

コマンドプロンプトを起動して、Node.jsをインストールした階層に移動します。

私の場合は下記にインストールしましたので、
C:\Program Files\nodejs

cd Program Files\nodejs

でエンターを押せば、コマンドプロンプト上でディレクトリの移動ができます。
（cdはチェンジディレクトリーですね）
Dドライブにインストールしている場合は、

d:

で、Dドライブに移動できるので、そこからcd～と入れてください。
ちなみに、フォルダ名は1文字入れてTabキーを押せば続きは勝手に表示されます。

Node.jsのディレクトリに移動しましたら、
コマンドプロンプト上で下記を打ちます。

npm install cordova -g

放っておくと何やらごちゃごちゃ出るので、
コマンドプロンプトが動かなくなったら、さらに下記を打ちます。

npm install plugman -g

ステップ⑦：PATHを設定　その2

ステップ④ではAndroid SDKを実行するため、PATHを設定しましたが、
今度は、cordova コマンドがAndroid SDKの各種ツールを呼び出せるように設定します。
PATHを設定することで、コマンドを使用した時に、PCが探せるようになるというような感じです。（たぶん）

「システムの詳細設定」（「システムのプロパティ」の「詳細設定」タブ）より、
「環境変数(N)」ボタンを押してください。

ユーザー環境変数 [Path] を編集し、後ろに以下を追加
…… ;C:\Users\ユーザー名\AppData\Local\Android\sdk\tools;C:\Users\ユーザー名\AppData\Local\Android\sdk\platform-tools;

私の場合はDドライブにAndroid studioをインストールしたため、
D:～というディレクトリになりました。

ステップ⑧：CordovaでAndroidアプリのプロジェクト作成

やっとアプリのプロジェクトが作れるところまで来ました！
コマンドプロンプトで、下記を指定することで、Android用のプロジェクトができます。

D:
cd testgame

cordova create Game1  jp.touchstone  TestGame1 -d

任意でいいのですが、上記の例だと、Dドライブ直下のtestgameフォルダに作ります。

そして、testgameフォルダの中にGame1フォルダを作り、
jp.touchstone パッケージで、SampleApli1 ファイルを作ります。

とりあえず、コマンドを打って、指定した場所に
testgameフォルダが実際にできていればOKです。

ステップ⑨：Android SDK ManagerでSDK追加

Android SDK Managerを起動して、SDKをインストールします。
SDK Manager.exeを起動してください。

私は下記にインストールしましたが、
Android Studioインストール時に設定したディレクトリにあります。

D:\Users\xxx\AppData\Local\Android\sdk
SDK Manager.exe

または、コマンドプロンプトからも起動できます。
起動したままで、androidと入れててエンターを押せば起動します。

C:android

起動したら、適当にSDKをインストールします。
私は、Android 4.2.2(API 17)からAndroid 6.0(API 23)までインストールしました。
ちなみに、Android Nはインストールできませんでした。

インストールしたいものに、チェックして、右下より
「Install」ボタンを押してください。
その後、別のウィンドウが出てくるので、
「Accept License」にチェックをして「Install」を押します。

インストールにはとても時間がかかるのでとても待ちます。

終わったら、cordova platform add androidをします。

D:
cd testgame\Game1

cordova platform add android

ステップ⑩：AVD Managerの設定

SDK Manager.exeと同じディレクトリにある、
AVD Manager.exeを起動します。
コマンドプロンプトから起動したい場合は、下記のようになります。

C:android avd

ここで、新しいデバイスの定義ができますが、
デフォルトでいくつか入っているので、別にしなくても良いかと思います。

ステップ⑪：ティラノスクリプトを入れる

D:\testgame\Game1\www

wwwフォルダに、ティラノスクリプトのindex.htmlがあるフォルダを上書きします。
（特に増やしてなければ、下記が上書きされると思います。）

・data
・tyrano
・index.html
・novel_sound.swf
・readme.txt

index.htmlを開いて、 の直前に以下のコードを追加してください。

<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>

ステップ⑫：ビルドと端末での起動

Android端末を、デベロッパー（開発者）モードに変更します。
USB接続しない状態で、Androidの[設定][端末情報]で、[ビルド番号]で記号が並んでいるところを、7回タップします。
すると、「デベロッパー・モード」になります。

設定に[開発向けオプション]が追加されているので、[USBデバッグ]をチェックします。

そしてUSBでPCに接続します。

コマンドプロンプトで【C:\testgame\Game1】のディレクトリに移動して、
「cordova build」を実行すると、ビルドされます。その後、
「cordova run android -device -d」を実行すると、USBで接続した端末で起動できます。

D:
cd testgame\Game1

cordova build

cordova run android -device -d

おわり

お疲れさまでした。これで端末での起動は終了です。

エミュレータでの起動方法などもろもろありましたが、もう端末起動で力尽きました。

横画面にしたいとか、ステータスバー消したいとかあれば、
config.xmlを編集することでどうにかなります。
下記は上でステータスバーを消しており、下で横画面固定にしています。

<preference name="Fullscreen" value="true" />
<preference name="orientation" value="landscape" />

見にくい記事になってしまいましたが、
とりあえずこの手順でAndroidアプリの起動ができました。

最初にできなかったのは、
ApacheのAntをダウンロードしていなかったのと、
対応するAndroid SDKがインストールされいなかったかもしれない。

謎なき脱出ゲーム、閉める部屋

閉める部屋完成！

プレイはコチラ↓
※現状不具合が多く、プレイできない状態です。
閉める部屋 - 無料ゲーム配信中！ [ノベルゲームコレクション]

どんなゲームか

なぜか部屋に閉じ込められてしまった男性が、
外へ出ようと色々探していると、ベッドに……

部屋を移動したり、特定の行動をすると時間が経過していくので、
タイムリミットが実はあるよな、脱出ゲームです。
謎解きは一切ないので、色々調べまくれば進みます。

タイトル画面とかないので、いきなりはじまります。

ティラノスクリプト所感

ティラノスクリプトで全部つくった理由として、
ブラウザで見れるようにしてスマホでもやりたいなぁという思惑があったのですが、
素材とかサイズ感とかもろもろ何も考えてなかった！故に重い！そして挫折！

PCで出来ることをマストにしてて、それ基準でサイズを決めてしまった。

ティラノスクリプトは素早く、ゲームを形にするのにはとても良いですね！！
UIとかもろもろこだわりまくろうとすると、
どうしたら良いのか調べるのに時間がかかってしまいますが、（どんなツールでもそうだと思いますが）
既存の仕組みだけで十分いろいろできました！

サーバに上げたとたんエラー！？謎エラーと解決法

ティラノスクリプトを何とかブラウザに上げようと奮闘しており、
出会ったエラーと、解決までのストーリーとなります。

結論！

使っていたレンタルサーバが良くなかった！
fc2サーバ
FC2 -無料ブログ 無料動画 無料ホームページ レンタルサーバー 無料アクセス解析 SEO対策ツールなど-
を使っていましたが、
どうもティラノスクリプトと相性が悪いみたいです。

具体的になエラーなどは下記に書きますが、
とりあえずウェブクロウhttp://www.webcrow.jp/に変更したら、
普通に動くようになりました。

どんなエラーが出たか

こんな感じで、サンプルをサーバに上げていたのですが、
オプション画面。直接、セーブやロードをしてもエラーが出て、
白い画面になりました。

■エラー内容
Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.

何が良く分からないというと、
そもそもサイトでは動いていたものが、自分でアップしたら動かない所でした。

色々調べてみると、getComputedStyleの第一引数がうまく取れてないのかなぁ
という事まで分かったのですが、修正する能力はないので困りました。

そうだ、レンタルサーバ変えよう

fc2サーバは無料版では広告など入っており、
有料版にしてもなぜか下の赤枠部分が生まれてしまいます。

なので、レンタルサーバを変えました。
ウェブクロウにしてみると、

うん。フォルダがすっきりして、
白い画面にならなくなりました。

ウェブクロウは使いやすいかといえば、
まぁそんなすごく使いやすくもないですが、
ファイルアップロードするだけなので、とりあえず動いてくれればそれでいいさ。

■アップロード完了
http://hiyokko.webcrow.jp/croom/

ここに丸ごとアップして、遊べるようになりました。
まだ完成じゃないのですが、
アップロードの方法は分かったし良しとしよう。

ちなみに、携帯だと重すぎて遊べたものじゃないです。

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

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

任意のキーに、座標やスケールなどの指定をすれば、
指定していない部分は勝手に補完してくれるいい感じのアニメ―ジョン。

10秒で2倍に拡大するだけなら、
0秒に1倍、1秒に2倍を指定してあげるだけで、
0.1秒、0.2秒などの間の部分が保管されます。

ティラノスクリプトでは

個人的には3ステップに分けて考えています。

①キーフレーム設定
②再生設定
③実際の要素をアニメーション

私の場合は、①と②はアニメーション用の.ksに記載し、
③だけ、シナリオ部分の.ksに書いてます。

今回は↑のアニメーションの例です。

①キーフレーム設定

keyframeの名称はp_animにしておりますが、
ここは任意で好きな名前にしてください。

;▼左右揺れ
[keyframe name="p_anim"]
[frame p=10% x="0" scale=1 rotate="-20deg"]
[frame p=15% x="0" scale=0.9]
[frame p=20% x="0" scale=1 rotate="10deg"]
[frame p=25% x="0" scale=0.9]
[frame p=30% x="0" scale=1 rotate="-20deg"]
[frame p=35% x="0" scale=0.9]
[frame p=40% x="0" scale=1 rotate="10deg"]
[frame p=50% x="0" scale=1 rotate="0deg"]
[frame p=80% x="0" scale=1.1]
[frame p=100% x="0" scale=1 rotate="0deg"]
[endkeyframe]

左右上下の移動がないのですが、
x="0"の部分をx="10"みたいにすれば、移動もつけられます。
縦方向の場合は、y="10"みたいにします。

p=●%の部分が、キーの場所となります。

②再生設定

①キーフレーム設定したものを、
「何秒」で「どのように」再生するかを設定します。

kanimの名称もp_animにしておりますが、
keyframeの名称とバラバラでもOKです。
個人的には間違えにくくなるよう同じにしております。

;音符揺れ_1回
[macro name="p_anim"]
[kanim name="p_anim" keyframe="p_anim" time=2000]
[wa]
[endmacro]

;音符揺れ_繰り返し
[macro name="p_anim"]
[kanim name="p_anim" keyframe="p_anim" time=2000 count="infinite"]
[endmacro]

便宜上[macro name="p_anim"]のように、マクロでくくっていますが、
べつにマクロ化する必要はないです。

count="infinite"を付ければ、繰り返して再生され
付けないと1回きりの再生となります。
1回だけの場合は、[wa]を記載して、再生待ちをしても良いかもです。

③実際の要素をアニメーション

今回は画像ボタンをアニメーションさせます。

button name="p_anim"のp_animは
kanim name="p_anim"のp_animを呼んでいるので、
別の名前にする際は、両方同じ名前にしてください。

;音符の画像ボタン
[locate x=0 y=475]
[button name="p_anim" graphic="frame_note.png" target=*sound01] 
[p_anim]
[s]
*sound01
[cm]
シナリオへ続く。[l][r]
[cm]

まとめ

ちょっとアニメーションするだけで、
結構いい感じになりますね！

既読スキップ機能 byティラノスクリプト

今回はコンフィグのスキップボタン機能を、
既読スキップ機能に変更します。

デフォルトでは、未読も既読も関係なくスキップしますが、
少しの変更で、既読スキップ機能に変えられます。

※コンフィグカスタマイズの記事はコチラ
コンフィグカスタマイズ byティラノスクリプト - ひよっこ blog

下記のURLに既読スキップの方法が書かれていたので、
バージョンによってはそちらを見てください。

システム関係(4ページ目) - ティラノスクリプト 製作テクニックwiki

Config.tjsの中に、;autoRecordPageShowingという記述がなかったので、
;autoRecordLabelを編集しました。

その他は↓の既読スキップ部分に記載されている方法で大丈夫です。
ティラノスクリプトV4.00 をリリースしました。 - シケモクテクノロジー

data\system\Config.tjsの編集

// ◆ ラベル記録　の下にある
;autoRecordLabel = false;を
;autoRecordLabel = true;に変更

data\scenario\first.ksの編集

first.ksじゃなくても、ゲームが始まる前に読み込める場所なら
どこでもいいですが、下記を記述することで、
コンフィグのスキップ機能が既読スキップ機能になります。

;未読スキップオフ
[config_record_label skip=false]

;既読文字カラー
;color部分を任意の色に変更します。今回は限りなく白い灰色
[config_record_label color="0xcccccc" ]

思ったより簡単だったので、記事にするまでもないかと思ったのですが折角なので。
私には難しいだろうなぁと思っていただけに、驚きの簡単さにビビりました。

セーブ＆ロードUIの調整 byティラノスクリプト

今回は、上の画像のようにセーブとロード画面のUI調整を行います。

デフォルトをどう変更するか

何も変更しないとこんな感じなのですが、
個人的に気になったポイントは下の4点です。

・線は白なのに文字は黒なので統一したい
・文字のサイズが小さい
・白い線に対して、文字が中央に来てない感がある
・横長感があるので左右を開けたい

修正するファイル

tyrano\tyrano.css
今回の場合は、cssの変更だけで済みました。

tyrano\html\save.html
tyrano\html\load.html
もっと大きく変えたい場合は、htmlも合わせて修正すると良いです。

htmlのタグの中に、{{:save_date}}
があったので、CSSからsave_list_item_dateを検索します。

とりあえず、下記のように設定すれば、一番上の画像のように表示されます。

/* セーブ時の画面の設定
--------------------------*/
/* セーブデータリスト全体の設定 */
.save_list {
  background-color: rgba( 0, 0, 0, 0.65 );
  display: table;
  table-layout: fixed;
  width: 80%;
  border-top: 1px solid #ccc;
  font-size: 14px;
  font-weight: normal;
}
/* セーブデータの設定 */
.save_list_item {
  display: table-row;
  cursor: pointer;
}
/* セーブデータのサムネイル部分の設定 */
.save_list_item_thumb {
  display: table-cell;
  vertical-align: middle;
  width: 96px;
  border-bottom: 1px solid #ccc;
}
.save_list_item_thumb img {
  width: 100px;
  height: 80px;
}
/* セーブデータのテキスト部文の設定 */
.save_list_item_area {
  display: table-cell;
  vertical-align: middle;
  padding: 0 10px;
  border-bottom: 1px solid #ccc;
}
/* セーブデータの日付の設定 */
.save_list_item_date {
  font-size: 15px;
  color: #ddd;
  display: block;
  padding: 5px 0;
  line-height: 1;
  text-shadow:
		-1px -1px #000,
		1px -1px #000,
		-1px 1px #000,
		1px 1px #000;
}
/* セーブデータのテキストの設定 */
.save_list_item_text {
  padding: 7px 0 0 0;
  font-size: 20px;
  color: #ddd;
  display: block;
  line-height: 1.3;
  height: 40px;
  overflow: hidden;
  text-shadow:
		-1px -1px #000,
		1px -1px #000,
		-1px 1px #000,
		1px 1px #000;
}

もうちょい詳細

background-color: rgba( 0, 0, 0, 0.65 );

背景に0.65(35%透明)の半透明黒色を置きます。
これによって、白い文字を見えやすくします。

  width: 100px;
  height: 80px;

サムネイルのサイズ設定ですが、
画面サイズに合わせ、微調整をかけています。

width: 80%;

.save_listはwidth: 100%;で設定されていますが、
これでは左右に余白ができないため、80%に設定。

font-size: 15px;
font-size: 20px;
color: #ddd;

text-shadow:
	-1px -1px #000,
	1px -1px #000,
	-1px 1px #000,
	1px 1px #000;

文字サイズはfont-size
文字色はcolor: #ddd;（ほとんど白色）
文字の縁はtext-shadow:で上下左右に影をつけることで表現しています。

padding: 7px 0 0 0;

CSSの場合、上下の中央寄せはちょっとややこしそうだったので、
paddingで上の部分に余白を作って対応しました。

こんな感じで、ちょっとひと手間加えるだけで、
ゲームにあった色合いとか、雰囲気になるので手軽ですね！