ひよっこ blog

ゲーム制作について、作ったものや思ったことをつらつら書いていく予定

僕の完全犯罪

ゲーム制作_完成 ティラノスクリプト

僕の完全犯罪

URL：http://hiyokko.webcrow.jp/higai/

あの子を毒殺しようゲームです。
しなかったらしなかったでエンディングがあります。
ノベルゲームなので、適当に選択していけば進みます。

裏話

ティラノスクリプトのアニメーション機能を使おうと思って、
目パチや途中の演出を作ってみました。
反転とか、表示非表示とかも使っていたので、
想像と違う座標に出ていたりと、思ったように動かなくて大変でした。

後はオプション画面をデザインはプラグイン使って楽をしました。
横画面から縦画面に画像を調整したくらいですね。

なんかスマホで表示してもそこそこ軽くなっているのは、
ティラノスクリプトのバージョンを上げたからなのか、
内容を少なくしたからなのかは不明ですが、
前回作った時よりサクサク動いている気がします！

一応一通り内容は完成しているけど、
サウンドを付けたいものだ（オプションには音量設定あるのになぁ）

解読-kaidoku-

ゲーム制作_途中

解読-kaidoku-

短編オムニバス系推理ゲーム。
※PCでも見られますが、AndroidのChomeブラウザ推奨
http://hiyokko.webcrow.jp/kaidoku/index.html

文章から謎が解ければなーと思ったんですけど、
ネタが全く浮かばない。

いい感じのネタが浮かんだらゆっくり更新していきたいです。

Diving Girl

ゲーム制作_完成

jsdo.itが終わっておりまして

jsdo.itが終了していた…… - ひよっこ blog
現状プレイする方法がないのですが、思い出として残しておきます……

Diving Girlとは

URL：http://jsrun.it/hiyokko/tkQm
気泡に当たるとHP回復、クラゲに当たると大幅HP減少。
HPを上手く回復しながらより深く潜るゲームです。

裏話

いつだったか、GGJで作ったゲームです。
tmlib.jsというライブラリを使わせていただきました！
Home | tmlib.js

あとは、jsdo.itというサイトで作ったので、
実はコードも見放題です。
URL：http://jsdo.it/hiyokko/ASdW
Forkしてもらえればご自分のアカウントでも自由にアレンジできます！
jsdo.itは色んな人のコードが見られるので、JavascriptやCSSを学ぶには最適です。

教えてくださる人もいたので、
2,3日でサクッと完成したゲームです。

プラグインを使ってみた byティラノスクリプト

ティラノスクリプト

ティラノスクリプトのプラグインとは

tyrano.jp
とてもざっくりいうと、プラグインを入れることで、
簡単に色々な(入れたプラグインによる)機能が使えるようになるやつです。

システム画面を入れ替えるプラグイン

kopacurve.blog33.fc2.com
今回はシステム画面変更のプラグインを入れてみることにしました。
上記の「theme_kopanda_01」を入れます。
ちなみに、ティラノスクリプトは「tyranoscript_v440」を使っています。


プラグインの入れ方

1:プラグインをダウンロードする（theme_kopanda_01.zip）
2:theme_kopanda_01.zipを解凍して、中にある「theme_kopanda_01フォルダ」をコピー
3:「data\others\plugin」フォルダに「theme_kopanda_01フォルダ」をペースト

何と驚きの3ステップ！
これだけでシステム画面が入れ替えられるわけです。
f:id:hiyohiyokko:20170304154915p:plain


コンフィグも変えられる

「data\scenario\title.ks」にはコンフィグへ遷移できるボタンが設置されているが、
そのままではプラグインのコンフィグには遷移できない。
「data\others\plugin\theme_kopanda_01\config.ks」に遷移させる必要がある。

▼初期のボタン設定
[button x=166 y=507 graphic="title/button_config.gif" storage="config.ks"]

▼storageを変更する
[button x=166 y=507 graphic="title/button_config.gif" storage="../../data/others/plugin/theme_kopanda_01/config.ks"]
が、これだとconfig.ks内の[awakegame]がうまく機能しないので、下記のように変更。

▼role="sleepgame"を追加
[button x=166 y=507 role="sleepgame" graphic="title/button_config.gif" storage="../../data/others/plugin/theme_kopanda_01/config.ks"]

これで、コンフィグの見た目も変えることができました！
f:id:hiyohiyokko:20170304160838p:plain


まとめ

プラグインって入れるの大変かな…と尻込みしていましたが、やってみればとても簡単！
アレンジもして良いようなので、利用規約を守ったうえで使っていこうと思いました。
kopacurve.blog33.fc2.com

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

ティラノスクリプト

f:id:hiyohiyokko:20160923214026p:plain

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

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

デザインはカスタマイズしていますが、こんな感じです。
f:id:hiyohiyokko:20160923214303p:plain

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

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

まずは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>

これでよし！

f:id:hiyohiyokko:20160923220537p:plain

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

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がインストールされいなかったかもしれない。

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

ゲーム制作_完成

閉める部屋完成！

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

f:id:hiyohiyokko:20160522214833p:plain

どんなゲームか

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

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

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

ティラノスクリプト所感

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

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

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