2017/07/16

【ティラノスクリプト】ダイアログのカスタマイズ設定

こんにちは。ネコモシャモジモです。
ティラノスクリプト関連記事三本目は、『しあわせの夢』で使用しているダイアログ(セーブ上書き時等に表示される「Cancel」「OK」ボタンのついた確認画面)についてです。

tyrano2.gif
デフォルトだとこのようなデザインのものを……

tyrano.gif
こんな感じに変更しました。

実際の動きはゲームで確かめてみてください。

『しあわせの夢』公式サイト
http://necomoji.webcrow.jp/shiawasenoyume/index.html
ノベルゲームコレクション
http://novelgame.jp/games/show/293

***

まずは表示するときの動きです。標準では上からにゅっと出てくる動きになっていますが、これをフェードインでふわっと表示するように変更します。

tyrano/libs/alertify/alertify.core.css

.alertify,
.alertify-show,
.alertify-log {
transition: all 200ms linear;
}
.alertify-hide {
transition: all 100ms linear;
}
.alertify-log-hide {
transition: all 200ms linear;
}

.alertify-cover {
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color:white;
opacity:0;
}
.alertify-cover-hidden {
display: none;
}

.alertify {
position: fixed;
z-index: 100000000;
top: 150px;
left: 50%;
width: 550px;
margin-left: -275px;
opacity: 1;
}
.alertify-hidden {
opacity: 0;
display: none;
}
:root *> .alertify-hidden {
display: block;
visibility: hidden;
}

.alertify-logs {
position: fixed;
display: inline-block;
z-index: 5000;
width: 200px;
left: 50%;
top: 10px;
margin-left: -100px;
text-align: center;
}
.alertify-logs-hidden {
display: none;
}
.alertify-log {
opacity: 0;
}
.alertify-log-show {
opacity: 1;
}
.alertify-log-hide {
opacity: 0;
}
.alertify-dialog {
padding: 25px;
}
.alertify-resetFocus {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.alertify-inner {
text-align: center;
}
.alertify-text {
margin-bottom: 15px;
width: 100%;
box-sizing: border-box;
font-size: 100%;
}
.alertify-buttons {
}
.alertify-button,
.alertify-button:hover,
.alertify-button:active,
.alertify-button:visited {
background: none;
text-decoration: none;
border: none;
line-height: 1.5;
font-size: 100%;
display: inline-block;
cursor: pointer;
margin-left: 5px;
}

@media only screen and (max-width: 680px) {
.alertify,
.alertify-logs {
width: 90%;
box-sizing: border-box;
}
.alertify {
left: 5%;
margin: 0;
}
}


こんな感じにしてみました。そのまま使いたい場合はまるっと書き換えればOKです。

***

次に見た目のデザインを変更します。

tyrano/libs/alertify/alertify.default.css

alertify,
.alertify-log {
font-family: "Noto Sans Japanese";
color: #111;
}
.alertify {
background: rgba(255,255,255,.9);
border: 5px solid rgba(0,0,0,.7);
border-radius: 0;
box-shadow: 0 3px 3px rgba(0,0,0,.3);
background-clip: padding-box;
}
.alertify-text {
border: 1px solid #CCC;
padding: 10px;
border-radius: 0;
}
.alertify-button {
border-radius: 0;
color: #eee;
font-weight: normal;
padding: 6px 15px;
margin-top: 20px;
margin-right: 10px;
width: 100px;
}
.alertify-button:hover,
.alertify-button:focus {
outline: none;
}
.alertify-button:focus {
}
.alertify-button:active {
position: relative;
}
.alertify-button-cancel,
.alertify-button-cancel:hover,
.alertify-button-cancel:focus {
background-color: rgba(0,0,0,.7);
border: 1px solid rgba(0,0,0,.9);
}
.alertify-button-ok,
.alertify-button-ok:hover,
.alertify-button-ok:focus {
background-color: rgba(0,0,0,.7);
border: 1px solid rgba(0,0,0,.9);
}

.alertify-log {
background: rgba(255,255,255,0.5);
border-radius: 4px;
color: #333;
padding: 5px 9px;
font-size: 16px;
}
.alertify-log-error {
background: #FE1A00;
background: rgba(254,26,0,.9);
}
.alertify-log-success {
background: #5CB811;
background: rgba(92,184,17,.9);
}


最初の「font-family」のみゲームで使用しているフォントに変更してください。

手軽にデザインを変更したい場合は有志の方が制作したプラグインを使用すると便利です。
ダイアログカスタマイズプラグイン(黒豆さん作)
スポンサーサイト
2017/05/27

ゲームにしたい短編シナリオを募集しています&スクリプトのお手伝いを承っています

こんばんは。ネコモシャモジモです。

中の人はずっと一人でゲームをつくっていたのですが、良いご縁があり、シナリオ(小説)を提供していただきそれをゲーム化するということをやってみました。

しあわせの夢|ノベルゲームコレクション
http://novelgame.jp/games/show/293

正直言って、ものすごーーーく楽しかったです。ひたすら演出をスクリプトに集中する、という作り方が自分には合っていたのかもしれません。制作中のモチベーションもずっと高かったような気がします。

というわけで、またぜひどなたかの小説やシナリオをゲーム化したい!と思い、この度募集させていただくことにしました。シナリオを書いたはいいけどゲーム化する時間や技術がない…という方や、新しい形で小説を公開してみたい!という方はぜひお声掛けください。

以前ふりーむ!さんの掲示板に投稿した記事を参考までに載せておきます。この内容に沿ったものでなくてもお気軽にご相談ください。意欲的な演出やシステムのノベルゲーム・ADV用のシナリオも大歓迎です!スクリプトとプログラミング頑張ります。

この度フリーゲームの制作にあたり、ノベル形式や会話形式のシナリオを募集いたします。
以下の内容をご確認の上、お気軽にご連絡ください。

■依頼形態、権利関係について
ゲームは共同制作ではなく、シナリオ提供(ご協力)という形を取らせていただきます。
当サークルのゲームとして公開いたしますが、シナリオや素材の著作権は各制作者様に帰属します。
ゲーム公開時にシナリオ担当者様としてお名前の掲載とサイトやSNSへのリンクを貼らせていただきます。

■シナリオについて
全年齢向けの完結した短編シナリオであればジャンルは問いません。
※個人的な都合で大変申し訳ないのですが、がっつりホラーはご遠慮ください…。
すでにご自身のサイト等で公開されているものや、公開予定があるものでも大丈夫です。
簡単な分岐やマルチエンドものも可。ご相談ください。

■シナリオ量
~100KB程度(プレイ時間:約30分~1時間程度)
※あくまで目安ですので多少の超過はまったく問題ありません

■制作について
演出に必要な音楽や画像については、シナリオ製作者様とご相談の上こちらで用意させていただきます。
制作の進捗も定期的にご報告いたします。(製作期間の目安は1~3ヵ月程度です)

■公開方法
WindowsPC向けのダウンロード版とブラウザ版の公開を予定しています。
他の形を取る場合は都度ご連絡いたします。

■報酬
今回はフリーゲームとしての制作ですので無償になります。

■備考
シナリオの内容に問題があると判断した場合や、多数の方からご連絡をいただいた場合は
大変恐れ入りますが、制作をお断りする可能性もございますのでご了承ください。

ご連絡の際は以下の項目をメール本文にご記載ください。

・お名前(ハンドルネーム)
・メールアドレス
・サイトアドレス(あれば)
・TwitterのID(あれば)
・シナリオが掲載してあるアドレス(orテキストファイルを添付)
・備考(あれば)

ご不明な点等ございましたらお気軽にお問い合わせください。
どうぞよろしくお願いいたします。



余談ですが、一応中の人の本職は絵描きなのでゲームにキャラクターイラストも入れられます。先入観を排除するため(ゲームの作風を限定しないため)絵のサンプル等は掲載していませんが、どうしても気になる!という方はメールでご連絡ください。

スクリプトのお手伝いも承っています。現在はティラノスクリプトを主に使用しています。お気軽にご相談ください。(無償で公開する作品に関しては基本的に無償でお手伝いしています)

■連絡先
necomoshamojimo◎gmail.com(◎→@)
いきなりメールはハードル高いよ!という場合は、TwitterのDMを解放していますのでそちらからご連絡いただいてもかまいません。→@NecomoShamojimo

よろしくお願いします!
2017/04/17

【ティラノスクリプト】GALLERYモード/MUSICモード

こんにちは。ネコモシャモジモです。
ティラノスクリプト関連記事二本目は、『しあわせの夢』Ver1.02から実装している「GALLERYモード/MUSICモード」についてです。
こちらはクリア特典なので、ぜひゲームをプレイして確かめてみてください。

『しあわせの夢』公式サイト
http://necomoji.webcrow.jp/shiawasenoyume/index.html
ノベルゲームコレクション
http://novelgame.jp/games/show/293

***


ゲームをクリアすると(物語をすべて読み終わると)タイトル画面に「GALLERY」「MUSIC」というメニューが新たに追加されます。
ちなみにメニューの追加はこんな感じで行っています。

①ゲームの最後(スタッフロールの後)にクリア判定用の変数を記述する

[eval exp="sf.complete = true"]


②タイトル画面に sf.complete が true のときのみ表示状態になるボタンを設置する

[button hint="GALLERYモードを表示します。" graphic="title/gallery.png" storage="gallery.ks" name="title_menu" x=339 y=500 width=140 role=sleepgame cond="sf.complete == true"]
[button hint="MUSICモードを表示します。" graphic="title/music.png" storage="music.ks" name="title_menu" x=528 y=500 width=94 role=sleepgame cond="sf.complete == true"]


***

まずはGALLERYモードです。

こんな感じの画面です。(一応クリア特典なのでモザイクを…)
ゲームで使用した背景画像をすべて鑑賞できるモードです。先程のタイトル画面に設置したボタンを見てもわかるとおり、role=sleepgameで呼び出しています。
仕様としては、サムネイルをクリックすると画像を拡大して表示し、再度クリックすると元の画面に戻るようにしています。コードを直接見てもらった方がはやいと思うので、こちらからダウンロードしてみてください。

以下は簡単な解説です。

[gallery_button graphic="../bgimage/ac/artroom.jpg" x=50 y=160 exp="tf.play = 'ac/artroom.jpg',tf.past = true"]


これがサムネイルのボタンです。詳しくはマクロ[gallery_button]を参照してください。bgimageフォルダの画像をそのまま縮小して表示しています。
exp(クリックされた時に実行されるJS)で同時に2つの式を指定しています。ひとつはtf.playという変数に画像のパスを入れて、次の画面の画像表示に使います。
もうひとつはtf.pastという変数をtrueかfalseか判定しています。これは『しあわせの夢』では過去と現在で背景画像の表示の仕方を変えているため、その背景画像が過去のものか現在のものか判別するために使用しています。

[button graphic="dummy.png" target="*gallery_show_close" name="gallery_show_close" x=0 y=0 width=960 height=640 fix=true]


クリックした先で画像を表示した後、こんなボタンを表示しています。これはクリックで表示した画像を閉じるための透明なボタンです。

*gallery_show_close
[iscript]
$(".gallery_show,.gallery_show_close").animate({opacity:"hide"},300,function() {
$(".gallery_show,.gallery_show_close").empty();
});
[endscript]
[return]


ジャンプ先の*gallery_show_closeで画像を閉じています。
表示/非表示はだいたいnameで指定したクラス名を利用して、jQueryで直接操作しています。

***

次はMUSICモードです。
こちらからコードをダウンロードしてみてください。


こんな感じの画面です。(一応クリア特典なので略)
どれも素晴らしい音楽ばかりなので(お借りした素材ですが)ぜひじっくり聴いてみてほしいです…!ちなみにエンディング曲はFullバージョンです。(スタッフロールではカットver.を使用してました)

以下は簡単な解説です。

[music_button y=148 exp="tf.play = 'asa'"]


曲名をクリックすると音楽を再生する仕様にしています。
tf.playには曲名を代入しています。ボタンが多くなると管理が大変なので、ここではベースに曲名その他をすべて載せた画像を表示して、透明なボタンを重ねる形にしました。

*music_loop
[stopbgm]
[if exp="tf.play == 'yume_akari2'"]
[playbgm storage="rengoku/yume_akari2.ogg"]
[else]
[eval exp="tf.music = 'dova/' + tf.play + '.ogg'"]
[playbgm storage="&tf.music"]
[endif]
[return]


ボタンをクリックするとこのラベルにジャンプします。音楽素材は配布サイトごとにフォルダ分けして管理していたので、その影響でif文が入っています。

*music_close
[iscript]
$(".music_base,.select_music,.music_close").animate({opacity:"hide"},300,function() {
$(".music_base,.select_music,.music_close").empty();
});
[endscript]
[fadeoutbgm time=500]
[wait time=1000]
[playbgm storage="dova/komorebi.ogg"]
[awakegame]
[s]


閉じるボタンを押すとこのラベルにジャンプします。MUSICモードの画面を消ししつつ、再生中の音楽もフェードアウトして、さらにタイトル画面の音楽を再生しています。
[sleepgame]で開始してるので終了するときは[awakegame]ですね。

***

かなりざっくりとした説明ですが、もしご不明な点がありましたらお気軽にお問い合わせください。今回配布したコードは自由に使っていただいてかまいません。(かなり使いづらいと思いますが…)
2017/04/13

【ティラノスクリプト】メニュー改造プライグイン

こんにちは。ネコモシャモジモです。
当サークル初のティラノスクリプト製ゲーム『しあわせの夢』を先日公開しました。
そこで実装した、クリックで開閉するタイプのメニューのプラグインを配布します。
個人用に作ったものですが、なにかの役に立てば幸いです。
実際の動きについてはゲームを参考にしてください。

『しあわせの夢』公式サイト
http://necomoji.webcrow.jp/shiawasenoyume/index.html
ノベルゲームコレクション
http://novelgame.jp/games/show/293


右上のアイコンをクリックするとメニューが表示されます。

***

メニュー改造プラグイン(Ver1.00)
ダウンロード(uploader.jp)

***

更新履歴
2017/04/16 公開

***

初めてティラノスクリプト用のプラグインをつくったので、なんらかの不具合があったらすいません。バグ報告大歓迎です。
その他ゲームをプレイしていて気になる仕様や知りたいことがありましたらぜひお知らせください。可能な限り回答させていただきます。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。