サーバに上げたとたんエラー！？謎エラーと解決法
ティラノスクリプトを何とかブラウザに上げようと奮闘しており、
出会ったエラーと、解決までのストーリーとなります。
結論！
使っていたレンタルサーバが良くなかった！
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で上の部分に余白を作って対応しました。
こんな感じで、ちょっとひと手間加えるだけで、
ゲームにあった色合いとか、雰囲気になるので手軽ですね！
コンフィグカスタマイズ byティラノスクリプト
今回は画面のイメージに合わせて、
ティラノスクリプトでコンフィグの調整を行います。
何度か自分でもやってるのですが、何をどこの場所で変更するのか、
毎回忘れて調べているので、基本的な部分をまとめた備忘録的なものです。
コンフィグの表示非表示
コンフィグは.ksにタグを書くだけで、
簡単に表示非表示が切り替えられる。
;コンフィグボタン表示 [showmenubutton] ;コンフィグボタン非表示 [hidemenubutton]
コンフィグの座標を設定
コンフィグへ遷移するボタンの座標も設定できる。
data\system\Config.tjs
Config.tjsファイルにある、下記の部分を修正します。
※今回は左上に設定したいため、どちらも7にしております。
// ◆ コンフィグ（メニュー）機能表示 // セーブ・ロードやタイトルに戻るといった一連の機能を表示するかを指定します ;configVisible = true; //コンフィグアイコンを表示 ;configLeft = 7 //コンフィグアイコンの左位置を指定できます。-1の場合は画面右下 ;configTop = 7 //コンフィグアイコンの上位置を指定できます。-1の場合は画面右下
コンフィグ関連の画像
tyrano\images\kag
画像の指定を変えたい場合は下記の.jsを修正する。
作った画像を『menu_button_save.png』のように指定すればOK！
tyrano\lang.js
novel : {
"file_menu_button_save":"menu_button_save.png",
"file_menu_button_load":"menu_button_load.png",
"file_menu_button_message_close":"menu_message_close.gif",
"file_menu_button_skip":"menu_button_skip.png",
"file_menu_button_title":"menu_button_title.png",
"file_menu_button_close":"menu_button_close.png",
"file_menu_bg":"menu_bg.jpg",
"file_save_bg":"menu_save_bg.jpg",
"file_load_bg":"menu_load_bg.jpg",
"file_button_menu":"button_menu.png"
}
次の課題
1.セーブとロードのUIが合わないので、ちょっと調整する。→解決
セーブ＆ロードUIの調整 byティラノスクリプト - ひよっこ blog
2.既読スキップボタンが、既読も未読もスキップするので、
既読だけスキップできるように調整。→解決
既読スキップ機能 byティラノスクリプト - ひよっこ blog
モンストのKPI勝手に考察
ミクシィの2015年4～6月期の連結決算は、売上高が500億円、純利益が159億円でしたね。
とても今さらですが、だいたいモンストの数字だとわかるので、勝手にKPIを考察しました。
（KPIとは重要業績評価指標、簡単に言えないけど、売上想定立てたり、想定通り言ってるかチェックするときに重要になるポイントだよ！）
※分かる数字は少ないので、結構あてずっぽです
1日の売り上げ5億！！
3ヶ月（90日）で500億なので、1日5.5億…だけど、さすがに500億すべてがモンストではないとして、
5億にしておきます。これだと3ヶ月で450億となり、9割を占めることになります！
売上高は正式なものなので、ここはだいたい合っているはずです。
MAUは300万くらい？
ひとまず先にちゃんとわかるDL数を。
下記を見ると2週間に1回くらいで100万DLずつ増えてます。
広告費かけてますねっ！1日5億の割にはかけてないかもしれませんが。
【3000万DL】 モンスターストライク ダウンロード数の推移をグラフ化 -
3000万DL全員がMAU（1ヶ月に1回以上ログインするユーザー）とは思えないので、
なんとなく1/10して300万くらいにします。
もう少し高いかなーとも思ったのですが、厳しめにしておきます。
課金率1%とすると、ARPPUは16,000円？
とりあえずMAUにした300万の中で、何名が課金しているでしょうか？
モンストは、あんまりARPPU（課金者の平均化金額）を重視していないみたいだという事と、
ユーザー数がやはり多いという事で1%にしておきましょうか。
1%という数字は、萌え系だったりキャラゲーだったり、
ユーザー層にお金を払いやすい人が多いと低いかなぁという感じですが、
子供や、お年寄りや、ゲームにお金を払う文化がない人がMAUに多いと、
そこまで低くはない数字かなと勝手に思ってます。
では、300万の1%、3000人で1ヶ月5億稼ごうと思えば、
5億÷3000で、約16,000円ですね。
うーん、16,000円はARPPUとしては結構高いです。
とはいえ、払う人は、突き抜けて、それこそ50万100万の世界で払っていると思うので、
月3000円くらいの課金者と平均すると違和感ないかもなーな感じです。
ARPPUって運営が安定しちゃうと大きく変えられないし、
もうちょい低いとしたら、MAUの見込みが低すぎるのかもというくらいです。
所詮は数字遊びさ
MAUも課金率もARPPUも答えは分からないので（分かる立場だったらそもそも言えないので！）所詮は数字遊びでしかないのですが、たまには答えの分からないものを考えて頭浸かってみよう感がありました。
KPI見てないっすよーそれでも売れたんですよーみたいに言う方も居ますが、
個人的には真に受けるのはいかがかなと思っています。
開発時にKPI気にしてない人は多く、タイミングとかもろもろの関係で売れたり売れなかったりという結果があるだけなのではないでしょうか。
逆に、開発時にKPIをかなり気にしている人は、手堅くミドルな売り上げを確保したい印象があります。
大きくチャレンジしない代わりに、しっかり利益を出していくというスタイルも目立たないかもしれませんが、確かに感じられます。
チャレンジも手堅さもどっちも大切だよね！
glinkを変更して画像ボタンに
glinkとは？
ティラノスクリプトで使える、簡単にちょっと飾られたボタンを使用するためのタグです。
選択肢を作る際、いちいち画像に文字を埋め込むと大量の画像が必要になってくるし、
かといって文字だけだと飾り気がなさすぎるため、使って損はないでしょう。
[glink target="j01" text="窓から出る" size=36 width="349" y=116]
[glink target="j02" text="出ない" size=36 width="349" y=219]
のようにすると、下の画像のような表示になります。
これはこれでいいのですが、ゲームの雰囲気に合わせたいので、
cssで作られているであろう下の部分を、画像に差し替えたいと思います。
glinkの定義はどこだ！
と思い、glinkでgrep検索しました。
色々引っかかるとは思いますが、kag.tag.jsが怪しいので中を見てみると、
.buttonで変更する点
元々は下のようになっていると思います。
淵の処理とか（丸くしたり）、文字とボタンの余白を調整しているのが分かりますね。
.button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; vertical-align: baseline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: .5em 2em .55em; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
なので、バッサリと淵の処理はカットし、
paddingが画像と文字の大きさに合うように調整しました。
.button { display: inline-block; zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */ *display: inline; margin: 0 2px; outline: none; cursor: pointer; text-align: center; text-decoration: none; font: 14px/100% Arial, Helvetica, sans-serif; padding: 22px 0px; text-shadow: 0 1px 1px rgba(0,0,0,.3); -webkit-border-radius: .5em; -moz-border-radius: .5em; border-radius: .5em; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.blackで変更する点
元々は下のようになっていると思います。
文字色だったりグラデーションを変更しているのが分かりますね。
.black { color: #d7d7d7; border: solid 1px #333; background: #333; background: -webkit-gradient(linear, left top, left bottom, from(#666), to(#000)); background: -moz-linear-gradient(top, #666, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#000000'); } .black:hover { background: #000; background: -webkit-gradient(linear, left top, left bottom, from(#444), to(#000)); background: -moz-linear-gradient(top, #444, #000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#000000'); } .black:active { color: #666; background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#444)); background: -moz-linear-gradient(top, #000, #444); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#666666'); }
なので、ここに用意した画像を入れればいいという訳です。
画像は面倒だったのでtyrano.cssと同じフォルダに入れてあります。
.black { color: #d7d7d7; background:url(btn_frame.png) no-repeat left top; } .black:hover { background:url(btn_framer.png) no-repeat left top; } .black:active { background:url(btn_frame.png) no-repeat left top; }
