FC2ブログ

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
スポンサーサイト

ゲームをWebサイトに埋め込んだときのスクロールを抑制する

ティラノスクリプトのゲームを、Webサイトの一部として画面に組み込む場合、
<iframe>タグか<object>タグを使って組み込むことになるでしょう。
書き方は、<object>タグなら
<object data="URL" type="text/html" width="横幅" height="高さ">
埋め込みが無効の場合のみ表示される文章
</object>
で、<iframe>タグなら
<iframe src="URL" width="横幅" height="高さ">
埋め込みが無効の場合のみ表示される文章
</iframe>
といった具合ですね。
ちなみにTwitterカードに埋め込んだ場合は<iframe>の動作となります。

で、こうやってゲームを埋め込んだとき、
ゲーム画面上でのマウスホイール動作が問題になってきます。

最近のティラノスクリプトなら下ホイールでテキスト進行ができるんですが、
埋め込み画面上でホイールするとWebページ全体がスクロールしちゃうのですね。
これはめちゃんこ不便なので、対策をしてみようという話です。

続きを読む

【プラグイン】カメラ拡張2

カメラ拡張プラグインのアップデートを行うつもりでしたが、
コードがけっこう書き換わったので「2」としてナンバリングすることにしました。

主に次の2つの機能が増えました。
・カメラは動かさずに画面全体(スクリーン)を動かす機能
・カメラの位置を相対的に指定する機能

ご利用の際は同梱の_README.txtをご一読ください。
>>GitHubで_README.txtを見る

ダウンロード

tempura_camera2.zipをダウンロード

履歴

2018/03/10 07:51 背景が前景に比べて動きすぎていた件を修正。(それまでのシナリオの演出結果が変わりうる修正です。)
2018/03/10 06:39 配布開始。

続きを読む

wait=falseのカメラを滑らかに接続する

通常、wait=falseで使用した[camera]の演出が終了しないまま
次の[camera]が始まると、カメラの接続が滑らかになりません。
それを滑らかにしようぜという小ネタです。

一応プラグイン化もしてみましたが、もとのライブラリからの変更は数行なので、
知識さえあれば直接エンジンを書き換えるほうがベターかなと思います。
変更箇所はこちらからご覧になれます。

ダウンロード

camera_trans.zipをダウンロード

履歴

2018/03/05 09:10 配布開始。

続きを読む

ティラノスクリプトをブラウザで動作確認しよう

ティラノスクリプトでゲームを開発・動作確認するときは、
アプリケーション版(最初からアプリ化してあるパッケージ)を使うか、
ティラノライダー(公式の開発用アプリ)を使うのがふつうだと思います。

最終的にアプリ版としてのみ配布する場合はそれでまったく問題ないですが、
ブラウザ版としての公開を考える場合は、ブラウザでも動作確認しておくとよいです。
できればIE、Edge、FireFoxなど複数のブラウザで動作確認をしたいところです。

ティラノスクリプトは異なるプラットフォームでも同一の振る舞いをさせるために
開発者の方が粉骨砕身取り組んでおられるのですが、完全無欠というわけにはいかず、
また第三者のプラグインを使っている場合、そのプラグインの仕様が万全でないために
特定のブラウザで動作しなくなるということもあるわけです。

ブラウザでゲームを起動したい


ティラノスクリプトはHTMLでできているんだから、
index.htmlをブラウザで開けばゲームが起動できるだろう、
と思うものなのですが、そううまくはいきません。

セキュリティ上の問題でエラーが出てしまうのですね。
Webページが自分のパソコン内のファイルを勝手に取得できたらヤバイですから、
そこで弾かれてしまうわけです。そのためConfig.tjsを取得しにいくところで止まります。

さあどうしよう、ということで方法がざっと3つあります。

1) サーバーにアップロードする
2) ブラウザのセキュリティを切る
3) ローカルでサーバーを起動する

1) サーバーにアップロードする


プロジェクトをまるっとサーバーにアップロードする、という方法があります。
ようするにブラウザゲームとして公開してしまうということです。
そうすれば当然ブラウザからゲームを起動できます。

ただこれだと、ファイルの変更を反映させるためには
いちいちサーバーにファイルをアップロードする必要があり、
それはもう面倒なんてもんじゃないです(´・ω・`)

2) セキュリティを切る


ブラウザのセキュリティを切る手があります。
どのブラウザでもできるわけではありませんが、GoogleChromeの場合それができます。

i) デスクトップ上にChromeのショートカットファイルを作る。
ii) ショートカットファイルを右クリックして、「プロパティ(R)」を開く。
iii) 「ショートカット」タブで「リンク先(T):」という項目を見つける。
iv) そこの内容を次のように書き換えて「OK」をクリックする。

chrome.exe --user-data-dir="%UserProfile%\AppData\Local\Google\Chrome\User Data" --disable-web-security

v) すでにChromeを起動している場合は一旦閉じる。
vi) ショートカットファイルからChromeを起動する。

これで、セキュリティが切られた状態でChromeが起動します。
そしたら、ティラノスクリプトのindex.htmlをドラッグ&ドロップすることで、
Chrome上でローカルのティラノスクリプトプロジェクトを起動できます。

参考サイト

3) ローカルでサーバーを起動する


ローカルでサーバーを起動することで、ローカル上のファイルを
あたかもサーバー上にあるファイルかのように見せかけることができます。
そうすればセキュリティのエラーが出ることはありません。

サーバーを起動するためのアプリというのがいくつかありますので、紹介します。

I) ティラノード(旧名:ティラノサーバ)

keito-works様が公開しているアプリです。
これは「ゲームを起動する」「サーバーを起動する」「ゲームをパッケージングする」という
3つの機能を持ったアプリです。ティラノライダーに近いですね。
アプリをダウンロードして、リンク先の説明に従って作業しますとサーバーが起動し、
任意のブラウザでローカルのティラノスクリプトを起動できるようになります。

II) HTTP Server Anywhere

山本祐次様がMITライセンスで公開しているアプリです。
しかしご本人のサイトがリンク切れを起こしていますので、
こちらにserver.zipを用意しました。
これをダウンロードしてから、次の手順で作業を行ってください。

i) server.zipをダウンロードして、適当なフォルダに解凍する。
ii) 「_SERVER.jar」と「_GAME.html」という2つのファイルが出てくることを確認する。
iii) その2つのファイルをティラノスクリプトのindex.htmlと同じ場所にコピーする。
iv) _SERVER.jarを起動し、タスクバーに★アイコンが現れることを確認する。
v) _GAME.htmlを任意のブラウザで開く。

※終了したいときはタスクバーの★アイコンを右クリック→「終了」で終了できます。
※このアプリはJavaで開発されています。iv)の手順で_SERVER.jarを起動できない場合
 Javaをインストールしてください。

【プラグイン】カメラ拡張

ティラノスクリプトV470RC5以降において、
疑似3D的なカメラの動きを簡単に実現できるようにするプラグインです。

レイヤーごとにZ座標を設定しておくことで自動的にカメラとレイヤーのZ距離を計算し、
視界において【近くの物は大きく動く】【遠くの物は小さく動く】の原則に従って(※)、
自動的に各レイヤーのカメラ移動量を計算・操作します。

※あくまでこの原則に従ってそれっぽく見えるように計算しているだけで、
 数学的に正しい計算式ではありません(´・ω・`)

また【指定のキャラクターにカメラを寄せる】機能もあります。なかなか便利。
ご利用の際は同梱の_README.txtをご一読ください。
>>GitHubで_README.txtを見る

ダウンロード

tempura_camera.zipをダウンロード

履歴

2018/03/03 18:53 配布開始。

続きを読む

【プラグイン】jQuery.a3d.jsアップデート

ティラノスクリプトがキーフレームアニメーションを適用するために
使用しているライブラリ「jQuery.a3d.js」を数行改造することで、
画面中央寄せ設定で[kanim]タグを使用したときに時などに生じる
以下の2点の問題を修正します。

1) 画面拡大時にオブジェクトの重なりの順番がおかしくなる点
2) コンフィグから戻ってきたときにアニメーションが再開する点

最新のティラノスクリプトに取り込まれました。

ダウンロード

jquery_a3d_update.zipをダウンロード

履歴

2018/03/01 15:10 opacityパラメータ等を指定したときに正常に動作しなかった問題を修正。
2018/03/01 06:46 配布開始。

続きを読む

プロフィール

著者:荻原(@tempura17654)
画像は『King Exit』(©紅唯まと)より、グイーネという登場人物。

全記事表示リンク

全記事表示リンク

検索フォーム

ブロとも申請フォーム

QRコード

QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。