‘HTML5’ タグのついている投稿

enchant.jsでノベルゲーム(9)

 ゲーム, プログラム,
 公開日:2012年11月26日 / 更新日:2013年1月17日

3ヶ月ぶりくらいにenchant.js本体を更新したら、
バージョンが v0.6-pre とかになってて、
内部が大きく変更されていることに気づきました。
しかもtl.enchant.jsは本体に統合されたようです。

こちらのページによると、
DOMのelementベースからcanvasベースに描画エンジンが変更されるとのこと。
アクションやRPGとかの性能向上を図るためのようで、
個人的にもこの方針は正しいと思います。

ただ・・・

ノベルゲーム向けのプラグインであるoes.enchant.jsでは、
DOMのelementを前提としている機能が多々あるので、
canvasベースになるとうまく行かなくなってしまいます。
実際v0.6-preでやってみると、ものの見事に動作しません(^_^;)
Entityクラスから _element プロパティが消えてます!!!
がーん(T_T)
う~ん、これは激しく困りました。

elementベースな従来のやり方に対応するかどうかは検討中だそうですが、
ぜひサポートしてくれることを願いたいです。

ということで、
oes.enchant.jsプラグインを使用する際は、
v0.5以下のenchant.jsを使用してください。

ちなみに、
古いバージョンのenchant.jsをダウンロードするには、
githubのenchant.jsページにて、
「branch:master」となっているドロップダウンリストから
Tagsを押して必要なバージョンを選択してください。

ところで、
v0.5系の最新であるv0.5.2でテストしてたら、
バグを見つけたのでoes.enchant.jsを修正しました。
サウンドのボリューム値は0~1の範囲となっているのですが、
tweenとか使った場合に、微妙にその範囲を超えてしまうことがあるようです。
範囲を超えるとブラウザによっては例外を起こしてしまうので、
設定するボリューム値がその範囲を超えないように対処しました。

機能テストの実行やパッケージのダウンロードとかはこちらからどうぞ。
関連投稿はこちらで参照できます。

enchant.jsでノベルゲームの機能テスト(8)

 ゲーム, プログラム,
 公開日:2012年8月8日 / 更新日:2012年8月9日

なんか久しぶりに enchant.js の本体を更新したら、
animation.enchant.js に替わって tl.enchant.js になってるのに気づきました。
ということで、
animation.enchant.js ではなく tl.enchant.js に対応するように修正しました。
また、
oes.enchant.js の一部の機能を ex.enchant.js として独立させて、
他のアプリでも利用できるようにしてみました。
鉄道なブログパーツ温泉なブログパーツで使ってます)
そのため、
oes.enchant.js を使う場合は ex.enchant.js も読み込むようにしてください。
短縮版の ex.enchant.min.js でも構いません。

関連投稿はこちらで参照できます。
機能テストの実行やパッケージのダウンロードとかはこちらからどうぞ。

温泉地巡行なブログパーツ

 プログラム, ,
 公開日:2012年8月4日 / 更新日:2015年7月13日

★2015年7月13日追記
動作エラーが起きていました。
やり方を変えてどうにか動くようにしました。
サーバー側で何か設定が変わった?
セキュリティ関係?
残念ながら情報不足で原因不明です。
う~む・・・(;´Д`)

以前、
鉄道駅なブログパーツを作りましたが、
今度は温泉なブログパーツを作ってみました。
enchant.jsを利用しています。

Wikipedia「日本の温泉地一覧」から
ランダムに選んだ温泉地を訪ねる感じになっています。

こちらのテンプレートにしたがって、
名称、画像、泉質などの情報を表示します。
座標情報があればグーグルマップへのリンクが付きます。
ただしテンプレートに対応していないページは対象外としています。

ということで、
作ったブログパーツはこのページの右側に貼り付けてあります。
温泉マークをクリックすると実行します。

ブログパーツとして使うには、
以下のスクリプトをコピペなどして埋め込んでください。
(※8月5日 スクリプトを短くするために少し変更しました)

ところで、
実際にやってみると画像や座標がなかったりするページが多いようです。
う~ん、ちょっと残念。

★2014年1月3日追記
@pagesがCloudFlareを導入したためか、なんか動かなくなっていたのを改善。
たぶん原因はここで書いてあるような感じっぽい・・・。

鉄道なブログパーツ「どこかの駅」

 プログラム, ,
 公開日:2012年6月20日 / 更新日:2017年6月19日

★2017年6月19日追記。
またwikipediaのページの内容が変わったようで、
うまく動かなくなっていたようです。うむぅ・・・。
動くように改修しました。

★2017年4月14日追記。
wikipediaのページの内容が変わったようで、
うまく動かなくなっていたようです(^_^;)
動くように改修しました。

★2015年7月13日追記。
動作エラーが起きていました。
やり方を変えてどうにか動くようにしました。
サーバー側で何か設定が変わった?
セキュリティ関係?
残念ながら情報不足で原因不明です。
う~む・・・(;´Д`)

★2014年1月3日追記。
@pagesがCloudFlareを導入したためか、なんか動かなくなっていたのを改善。
たぶん原因はここで書いてあるような感じっぽい・・・。

enchant.jsを利用して、
今度はアプリっぽいものを作ってみることにしました。

enchant.jsにはBox2Dのプラグインがあるので、
AS3版のBox2Dを利用して作ったFlashな「ロト6選択機」
移植しようかとも思ったのですが、
同じものを別な形式で作っても面白くないので、
その昔に思いついたアイデアを実現してみることにしました。

それは、
wikipediaの「日本の鉄道駅一覧」のページから
ランダムにどこかの駅の情報を取得して、
駅舎の写真とかを表示するというような感じです。
んで、
ブログパーツとして使えるようにサイズは小さめにして、
wikiやGoogleMapへのリンクを設けることにしました。
アプリの名前はずばり「どこかの駅」にしました(^_^;)

作業的には以下のような感じ。
XMLHttpRequestで該当ページを取得してresponseを解析。
必要な情報を収集して表示する。
ただしXMLHttpRequestはクロスドメインではうまくいかないので、
自前のプロクシを経由して回避しています。
プロクシについてはこちらを参考にさせていただきました。

実際にやってみると、
検索するDOMタグのパターンの見極めに苦労したりして、
ページの解析には結構手間取りました。
また概ねテンプレ通りに記述されているようなのですが、
微妙に異なる表記パターンがあるので調整も必要でした。
当初は隣接駅の情報も取得しようとしたのですが、
パターンが多岐に渡るので断念しました。
結局、安定して採取できそうな以下の情報に絞りました。
駅名、駅名の読み、駅舎の画像、位置情報の4つです。
位置情報以外は必須とし、
それらを採取できなかった駅は対象外にすることにしました。

さて、そんなこんなで大体プロトタイプができたので、
Chrome以外のブラウザでの動作をチェックしたら、
問題が・・・嗚呼(T_T)

一つは、Operaでの表示がおかしい。
position:absoluteなDOMエレメントのleftやtopが更新されたら、
描画も更新されるはずなのに、なぜか更新されないパターンがある。
エレメントの追加順序を変えるとうまく行ったりすることもあって謎。
Operaのバグ? あるいはなんか最適化のミスか?
はたまた自分のPCの環境がおかしいのか?
でも他のブラウザではうまく描画されてるしなぁ・・・。
とりあえず、Operaだけ一部のアニメ演出は無しにしました。

もう一つはIE9、こっちの方が問題。
responseXMLにquerySelectorやquerySelectorAllが無い!?
documentのDOMにはあるのに、なぜかresponseXMLのDOMには無い・・・。
なんで?
これだからIEは、小一時間問い詰め・・・(以下略)(^_^;)
調べてみると、innerHTMLやstyleなどよく使いそうなプロパティも
responseXMLのDOMには無いようです。
どうやらresponseXMLのDOMには、
最小限のプロパティやメソッドしか実装されてないっぽい?
それにしてもquerySelectorが使えないのは痛い。
getElementsByTagNameとgetAttributeでちまちまやるしかないのか・・・。
めんどい・・・。
ああそうだ! jQueryがあるじゃないか!!
というか始めから使っとけ(^_^;)
あっさり解決しました。
セレクタの表記方法がCSSのと異なる場合があるけど、
それさえ注意しとけば問題なし。

ということで、
長々と書いてしまいましたが、
とりあえず完成したのを右サイドに貼り付けてあります。
ブログパーツとして使うには、以下のスクリプトを埋め込んでください。
(※8月5日 スクリプトを短くするために少し変更しました)

ちなみに、「日本の鉄道駅一覧」から
なぜかこの桟橋にたどりつけてしまいます(^_^;)
テストしてたら偶然みつけました。

enchant.jsでノベルゲームの機能テスト(7)

 ゲーム, プログラム,
 公開日:2012年6月4日 / 更新日:2012年7月17日

関連投稿はこちらで参照できます。
機能テストの実行やパッケージのダウンロードとかはこちらからどうぞ。


前回の続きです。
ブラウザごとの差異について、
サウンド以外にも気づいたことがあるのでちょっと書いてみます。

まずはCSS3。
機能テストでの視覚表現はできるだけCSSでやるようにしました。
スクリプトを修正せずに済むなら、その方が良いと思うからです。
transform,box-shadow,text-shadow,linear-gradient あたりを活用すれば、
それなりに豊かな視覚表現が期待できます。
しかし現状では対応してないブラウザがあったり、
ベンダープレフィックスを指定する必要があったりするのが、
残念です。
各ブラウザでの対応状況が早期に改善されることを期待しています。
ちなみに、
ブラウザごとのCSS3対応状況はこちらで確認できます。
また、text-shadow を使うと動作が重くなったりすることがあります。
FirefoxやOperaでは文字数が多くなるほどだんだん描画が遅くなりますが、
webkit系のChromeやSafariでは遅くなることなく安定しています。
普通に考えれば、「影」処理を適用しつつ1文字ずつ描画するわけですから、
文字数が多くなれば処理時間が増えるのは当然とも思えるのですが、
webkit系は文章全体に一度だけ「影」を適用するなどして
うまくやっているのかもしれませんね。

次にサウンド。
前回でも触れましたが、
HTML5でコーディックが統一されていないのが現状の問題。
ビデオも同様なようです。
特許がらみの問題がない OGG Vorbis あたりでいいんじゃないのかと
個人的には思うのですが、
ブラウザごとに思惑とかあるのでしょうか・・・。

ということで、
現状ではクロスブラウザで動作させるには、
使用するCSSを制限したり、サウンドはOGGとMP3の2種類を用意するなど、
配慮する必要がありそうです。
ただし視覚表現とのトレードオフがあるのが悩ましいところです。
特に、text-shadow とか・・・。
個人的には、
対応状況や速度面で有利と感じる Chrome を使えばいいじゃないか、
と言いたかったりしますが(^_^;)

それから、
プラグインを少し修正しました。
OesText.printIcon を画像だけでなく汎用的にやれるようにしてみました。
また、選択肢を選択後の「余韻」を表現できるようにしてみました。
あと、微妙に内部処理を調整しました。
パッケージのダウンロードはこちらからどうぞ。