メニュー画面にフルスクリーンボタンを設置したい【ティラノスクリプト】

ティラノスクリプト製のブラウザゲームをスマートフォンでプレイする際、横持ちにしてプレイすると画面が広くて見やすくなります。 しかし、これでもなお、上部にURLバーが表示されていて邪魔です。

このURLバーは「screen_full」タグを実行することで解消できることのことを以下の記事で知ることができました。

星見さんの記事です。
ティラノビルダーのフルスクリーン（全画面）化で困った時の解決策メモ

冒頭の引用元記事をおさらいする

この記事は上記リンクの外部サイトの記事を補足する形になりますので、リンク先の記事を読んでいない人のために簡単に同一内容に触れておきます。

メニュー画面にフルスクリーンボタンを設置する方法だけを知りたい人は「コード解説」まですっ飛ばしても大丈夫です。

screen_fullタグ使用するときは、クリック待ちを挟まないと正常に動作しない。

おそらくこれは最近のブラウザ環境になってからだと思われます。 たぶん、BGMやSEがクリックなしでは流れなくなったアップデートのもの。

（一部？）ブラウザの場合、[screen_full]単体じゃフルスクリーンになってくれません。（自分の場合AndroidだけじゃなくてWindowsでもそうでした）

一発でフルスクリーンにするには、クリック待ちやボタン等を間に挟む必要があります。

引用元 ティラノビルダーのフルスクリーン（全画面）化で困った時の解決策メモ

なのでscreen_fullで画面を全画面化する際は、以下のようにクリック待ちを入れます。

[l]
[screen_full]

タイトル画面にフルスクリーンボタンを設置したい場合

タイトル画面にフルスクリーンボタンを設置したい場合は以下のようにスクリプトを記述することで対応可能です。

*title
[glink text="フルスクリーン" target="*full"]
[s]

*full
[screen_full]
[jump target="*title"]

フルスクリーンというボタンを押すと画面がフルスクリーンになり、titleラベルにジャンプしてタイトル画面を再描画します。

画面が左寄りになってしまう場合の対処法

フルスクリーンにした際に画面が左寄りになってしまう場合、センタリングが有効になっていない可能性があります。

ティラノスクリプトV471の場合、センタリングはデフォルトで有効になっていました。 左寄りになってしまう場合、data/system/Config.tjsを確認してください。

// 画面をセンタリングするか否か
// アプリ化などでゲーム画面が画面外に出てしまうような場合にfalseを指定すると改善する場合があります。
;ScreenCentering = true;

本題　メニュー画面にフルスクリーンボタンを追加したい

まだ引用元にはいくつかセクションがありますが、本題に入りたいと思います。

星見さんの元記事に対して否定的な表現を多用しますが、正しい情報を伝えたいという理由によるものです。 僕の記事を参考にしていただいていることはとてもうれしいです。 javascript初心者の星見さんに難癖つけることが目的ではないことをご理解ください。

引用元の記事では以下のようなコードがjavascriptがわからないなりに「バッドノウハウかもしれない」という断りのもと紹介されていました。

var myobj2 = {
  config: function(){
    if (tyrano.plugin.kag.tmp.sleep_game != null) {
    return false;
  }
  tyrano.plugin.kag.ftag.startTag("screen_full",{storage:"full.ks",next:false});
  setTimeout(function(){
    $('.layer.layer_menu').css({'display':'none'});
    },200);
  },
};

おそらく呼び出し時には「myobj2.config()」といった記述をしていると思われます。 それなりにjavascriptがわかる僕に言わせてもらいますと確かにバッドノウハウです。

メニュー画面からコンフィグを開く方法【ティラノスクリプト】

この記事を参考にしていただいたようなのですが、根本的にオブジェクトの使い方が間違っています。 説明不足な記事で申し訳ないです。

僕が上記の記事で書いたコンフィグ画面をメニューから開くための元ソースがこちら。

var myobj = {
  config: function(){
    if (tyrano.plugin.kag.tmp.sleep_game != null) {
      return false;
    }
    tyrano.plugin.kag.ftag.startTag("sleepgame",{storage:"config.ks",next:false});
    setTimeout(function(){
      $('.layer.layer_menu').css({'display':'none'});
    },200);
  },
};

もしこれにフルスクリーンを呼び出すための記述を追加するとしたら以下のようになります。

【myscript.js】
var myobj = {
  //コンフィグ用のオブジェクト変数「config」
  config: function(){
    if (tyrano.plugin.kag.tmp.sleep_game != null) {
      return false;
    }
    //storageにconfig.ksを指定、nextにfalseを指定してsleepgameを実行する
    tyrano.plugin.kag.ftag.startTag("sleepgame",{storage:"config.ks",next:false});
    //200ミリ秒後、メニュー画面を消す（少し時間を待たないと見た目が変な感じがしたので）
    setTimeout(function(){
      $('.layer.layer_menu').css({'display':'none'});
    },200);
  },
  //↑カンマ（,）で区切ることで一つのオブジェクトの中に変数を二つ以上入れられます

  //フルスクリーン用のオブジェクト変数「screen_full」
  screen_full: function() {
  //storageに full.ksを指定、nextにfalseを指定してsleepgameを実行する
  tyrano.plugin.kag.ftag.startTag("sleepgame",{storage:"full.ks",next:false});
  setTimeout(function(){
    $('.layer.layer_menu').css({'display':'none'});
  },200);
  },
};

【menu.html】
<div class="menu_item">
  <a href="javascript:void(0)" onclick="myobj.config();"><img class="menu_config" src="画像のパス" /></a>
</div>
<div class="menu_item">
  <a href="javascript:void(0)" onclick="myobj.screen_full();"><img class="menu_screen_full" src="画像のパス" /></a>
</div>

【full.ks】
[screen_full]
[awakegame]

（あとで再解説しているので、このコードが何をしているのかよくわからない場合はさらっと流してください）

星見さんのコードにはどういった問題があるのか

星見さんが何を間違えているのかといいますと、先ほど書いたとおり、オブジェクトの使い方が不自然です。

オブジェクトとは、例えるとわかりやすく分類するための物置小屋みたいなものです。

星見さんはすでにmyobjという物置小屋の中にconfigというシステムを設置しています。 この状態で新たなシステムとしてscreen_fullを設置するなら、myobj2という新しい物置小屋を作る必要はなく、myobjの中にscreen_fullという名前で作ったほうがソースコードも読みやすいものになると思います。

ちなみにティラノ変数と呼ばれているsfやfやtfもティラノの中に存在している物置小屋のようなもの（つまりオブジェクト）です。 sfはシステム変数、fはゲーム変数、tfは一時変数とそれぞれ役割が決まっています。

僕が「メニュー画面からコンフィグを開く方法」でmyobjというオブジェクトを作ったのはティラノスクリプトの管轄外に出して、ゲームの影響を受けないようにするためです。 （iscriptの中やevalで書いてしまうとゲームの動作によって勝手に上書きされる恐れがあるため） なのでとくに理由がなければmyobj2という新しいオブジェクトを作るのではなく、同じオブジェクトの中に新しいシステムを置いていくほうがいいでしょう。

ちなみに、今回のオブジェクトは以下のような記述でも管理することが可能です。

【myscript.js】
var myobj = {}; //先に空のオブジェクトを作っておく

// myobj.configに関数を代入する
myobj.config = function(){
  if (tyrano.plugin.kag.tmp.sleep_game != null) {
    return false;
  }
  tyrano.plugin.kag.ftag.startTag("sleepgame",{storage:"config.ks",next:false});
  setTimeout(function(){
    $('.layer.layer_menu').css({'display':'none'});
  },200);
}

// myobj.screen_fullに関数を代入する
myobj.screen_full = function() {
  //storageにfull.ksを指定、nextにfalseを指定してsleepgameを実行する
  tyrano.plugin.kag.ftag.startTag("sleepgame",{storage:"full.ks",next:false});
  setTimeout(function(){
    $('.layer.layer_menu').css({'display':'none'});
  },200);
};

ティラノスクリプトのテクニックサンプルでは上記のように先に空のオブジェクトを作る書き方を見た気がします。

このほうがティラノ変数と似たような使い方ができるので、わかりやすいかもしれません。 （たとえばティラノのシステム変数はティラノ本体の中であらかじめ「var sf = {};」のような記述をしていると思われます）

第二に、「tyrano.plugin.kag.ftag.startTag」という関数についてです。

これはティラノスクリプトのタグを呼び出すためのもので、第一引数にタグ名、第二引数にオブジェクト状態のパラメータを渡すことができるようになっています。

しかし、screen_fullタグには渡すことのできるパラメータが存在しないので、指定しても意味がありません。

どうしてこれでフルスクリーンにできたかはわからないんですが（致命的）、おそらく動作としては、「メニューのフルスクリーン画像をクリック」→「myscript.js」が呼び出される→クリックを介して「screen_full」が動く→full.ksの[awakegame]で元の画面に戻る」といった風なんだとおもいます（曖昧）

（ただし、この方法だとフルスクリーンにするたびゲームテキストが一行進みます。「sleepgame」を間に挟めばいんでしょうけど、Javaスクリプトがよくわからず。　まぁそんなに違和感ないからいいかなと思って放置してます）

断定はできませんが、星見さんのやり方ではfull.ksにもジャンプしていませんし、awakegameも実行されていないと思います。

一応ちゃんと動いているということなので指定しても問題はなさそうですが、ソースの可読性（読みやすさ）を考えると第二引数には何も書かないほうがよいでしょう。

オブジェクトについての解説は以下の記事でもおこなっています。

ティラノスクリプトを自力で拡張していきたい人のための記事
glinkでconfig.ksを開きたい【ティラノスクリプト】

こ・ぱんだ氏のこの記事もオブジェクトの使い方の参考になります。

BGMや効果音の管理に連想配列をつかう
（javascriptにおける「オブジェクト」と「連想配列」はほぼ同じものだと思っても大丈夫です）

コード解説

星見さんの「full.ksというシナリオに飛ばす」という発想は大いに僕に役立ちました。 以上を踏まえて僕が思いついたのが上記で紹介したコードです。

結構上に行っちゃったと思いますので再掲します。

【first.ksなど】
[loadjs storage="myscript.js"]
【myscript.js】
var myobj = {
  //コンフィグ用のオブジェクト変数「config」
  config: function(){
  if (tyrano.plugin.kag.tmp.sleep_game != null) {
    return false;
  }
  //storageにconfig.ksを指定、nextにfalseを指定してsleepgameを実行する
  tyrano.plugin.kag.ftag.startTag("sleepgame",{storage:"config.ks",next:false});
  //200ミリ秒後、メニュー画面を消す（少し時間を待たないと見た目が変な感じがしたので）
  setTimeout(function(){
    $('.layer.layer_menu').css({'display':'none'});
  },200);
},
//↑カンマ（,）で区切ることで一つのオブジェクトの中に変数を二つ以上入れられます

//フルスクリーン用のオブジェクト変数「screen_full」
screen_full: function() {
  //storageにfull.ksを指定、nextにfalseを指定してsleepgameを実行する
  tyrano.plugin.kag.ftag.startTag("sleepgame",{storage:"full.ks",next:false});
  setTimeout(function(){
    $('.layer.layer_menu').css({'display':'none'});
  },200);
  },
};

var myobj = {}; 「myobj」という名前のオブジェクトを作成しています。 ①管理をしやすくする、②ゲームの動作の影響を受けないようにティラノスクリプトの外部で処理させる、という役割があります。

function() {……}
関数と呼ばれる処理をひとまとめにするコード。

setTimeout(function(){……},数字)
setTimeout関数と呼ばれる関数。第一引数に指定した処理を、第二引数に指定した時間分送らせてから発火させます。
今回の場合、200ミリ秒を指定しているため、sleepgame先でのawakegame後、200ミリ秒（0.2秒）経過してから動作します。

$(‘.layer.layer_menu’).css({‘display’:’none’})
jQueryでメニュー画面を表示しているレイヤーにdisplay:noneを付与し非表示にしています。

【menu.html】
<div class="menu_item">
<a href="javascript:void(0)" onclick="myobj.config();"><img class="menu_config" src="画像のパス" /></a>
</div>
<div class="menu_item">
<a href="javascript:void(0)" onclick="myobj.screen_full();"><img class="menu_screen_full" src="画像のパス" /></a>
</div>

onclick=”myobj.○○()” 上記javascriptでmyobjの中に代入した関数をクリックしたら発動するように設定しています。

【full.ks】
[screen_full]
[awakegame]

こうすることで「myobj.screen_full()」でフルスクリーンタグが実行できるようになり、合わせて「myobj.config()」でコンフィグ画面が開けるようになっています。

「myobj.screen_full」の動作としては、screen_fullを発動するためだけに「full.ks」にsleepgameしてジャンプし、screen_fullをし終わったらawakegameで戻ってきます。

sleepgameの引数にnext:falseをしているため、ゲームが勝手に進行するという問題も起きません。

広告