‘enchant.js’ タグのついている投稿

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 を画像だけでなく汎用的にやれるようにしてみました。
また、選択肢を選択後の「余韻」を表現できるようにしてみました。
あと、微妙に内部処理を調整しました。
パッケージのダウンロードはこちらからどうぞ。

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

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

関連投稿はこちらで参照できます。


前回の続きです。
HTML5のaudio要素が対応しているコーデックは、
ブラウザ毎にこんな感じに異なっているようです。
機能テストのサンプルではOGGを採用しましたが、
IE9ではOGGに対応してなかったり、
WindowsのSafariに至っては、
JavaScriptでの new Audio() が例外を起こします。
ん~なんでや? 自分のPC環境がおかしいのか?
とりあえずSafariはしかたないとしても、
IE9はMP3には対応しているので、
OGGに対応してなかったらMP3を採用するようにサンプルを修正してみました。
あらかじめ2種類のサウンドファイルを用意しておく必要がありますが、
より多くのブラウザでサウンドが鳴るようにできると思います。
また、
サウンドをロードする時のタイプ指定を省略できるようにしました。
省略した場合は拡張子から自動判定するようにしました。

ところで、
IE9ではボリューム値を変更してもすぐに反映されない、
というナゾな現象が起こっています。
微妙にタイムラグがある感じです。
他のブラウザでは問題ないです。
ボリューム最小から最大までフェードしようとしても、
最大音量で瞬間鳴ってからボリュームが変更される感じです・・・。
フェードアウトはうまくいっているように聞こえていますが、
これも実際のボリューム更新は遅れているのかもしれません。
あるいは、停止状態ではボリューム更新が反映されないのかも。
再生状態になってからでないと受け付けないとか・・・。
きちんと検証してないので何とも言えないのですが、
いずれにしろ何か問題があるっぽい感じがします。

さて今回で、
だいたいやり尽くせたかなと思うので、
こちらの独立したページにまとめました。
パッケージのダウンロードとかもこちらからできるようにしました。


5月26日追記。

WindowsのSafariでaudioが動作しない件ですが、
なんかキュピーンと閃いて QuickTime 入れたら
うまく行くようになりました。
Apple製品はこういうものなのでしょうか・・・(^_^;)

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

 ゲーム, プログラム,
 公開日:2012年4月29日 / 更新日:2014年5月15日

関連投稿はこちらで参照できます。


5月6日さらに追記。
なにげにJSLint通してみたら、
スーパーわんさか指摘された・・・。
空白の位置がどうとか、細かすぎだろ!
JSLintでオールグリーンなソース書くのは至難のワザな気がします(^_^;)
とはいえ納得できるミスもあったので、それらは直しておきました。

今後バグとか見つけたら、さりげなく更新しているかもしれません。
ご了承ください。


5月4日追記。
セーブまわりに手を入れてみました。
章に登録されていた子ノードのプロパティを
できるだけ復元するようにしてみたので、
ロード再開時に表示まわりとかで調整しなくて済むようになると思います。


前回の続きです。

セーブ関連でまだ手を入れたい所があったりするのですが、
一応ドキュメントを整備してみたので、
プラグインをパッケージにまとめました。
これを使ってノベルゲームとか作れるはず(^_^;)
こちらからダウンロードできます。

ということで、
enchant.jsを利用したノベルゲームの機能テストのサンプルは
こちらで試すことができます。
古いセーブデータをロードすると、
ハングってしまうことがあるかもしれません(^_^;)
シナリオを修正したために整合性が取れなくなっているのが原因です。
その場合はいったんセーブデータを全削除するようにしてください。

サンプルのソースはそれぞれ以下で参照できます。エンコードはUTF-8です。
機能テスト、実践的サンプル「紹介」「ノベル」「脱出」風。
視覚表現の多くはCSSで実現しています。
CSSのソースはそれぞれ以下で参照できます。
機能テスト、実践的サンプル「紹介」「ノベル」「脱出」風。

なお、Windows上のChromeブラウザで動作確認しています。
他のブラウザではうまく動作しなかったり、
サウンドが鳴らなかったり、
見え方が異なることがあるかもしれません。
ちなみに自分はChromeの表示フォントをメイリオに設定しています。

注意。

自分はスマホとかタッチ系デバイスを所有していないため、
それらデバイスでのタッチ動作を確認できていません。
ご了承ください。

CSSの一部では、「-webkit-」や「-moz-」などの
ベンダープレフィックスを使用している所がありますので、
ブラウザによって見え方が異なることがあります。

shadow系のcssが適用されている所では、
ブラウザによっては動作が重くなることがあるかもしれません。

いずれにしろ、
Windows上のChromeブラウザで動作確認できたら、
OKとしてしまっていますので、
その旨ご了承ください。

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

 ゲーム, プログラム,
 公開日:2012年4月16日 / 更新日:2014年5月15日

関連投稿はこちらで参照できます。


前回の続きです。

バックログ、既読スキップ、オートプレイを実装してみました。
たぶん、こんな感じで良いのではないかと思います。

次はドキュメント作業でもやろうかと思ったのですが、
システムをより改善できそうなアイデアが浮かんだので、
先にそれを試してみようかと思います。

ということで、
enchant.jsを利用したノベルゲームの機能テストのサンプルはこちらです。
古いセーブデータをロードすると、
ハングってしまうことがあるかもしれません(^_^;)
シナリオを修正したために整合性が取れなくなっているのが原因です。
その場合はいったんセーブデータを全削除するようにしてください。

ちなみにサンプル部分のソースはこんな感じ。エンコードはUTF-8です。
実践的サンプルのソースはそれぞれ以下で参照できます。
「紹介」「ノベル」「脱出」

なお、Windows上のChromeブラウザで動作確認しています。
他のブラウザではうまく動作しなかったり、
サウンドが鳴らなかったり、
見え方が異なることがあるかもしれません。
ちなみに自分はChromeの表示フォントをメイリオに設定しています。

注意。

自分はスマホとかタッチ系デバイスを所有していないため、
それらデバイスでのタッチ動作を確認できていません。
ご了承ください。

CSSの一部では、「-webkit-」や「-moz-」などの
ベンダープレフィックスを使用している所がありますので、
ブラウザによって見え方が異なることがあります。

shadow系のcssが適用されている所では、
ブラウザによっては動作が重くなることがあるかもしれません。

いずれにしろ、
Windows上のChromeブラウザで動作確認できたら、
OKとしてしまっていますので、
その旨ご了承ください。

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

 ゲーム, プログラム,
 公開日:2012年4月5日 / 更新日:2014年5月15日

関連投稿はこちらで参照できます。


前回の続きです。

より実践的なサンプルを3つ作ってみました。
それぞれ、「紹介」「ノベル」「脱出」風味な感じとなっています。

未実装なのはあと、
バックログや既読スキップとかですね。

ということで、
enchant.jsを利用したノベルゲームの機能テストのサンプルはこちらです。
ちなみにサンプル部分のソースはこんな感じ。エンコードはUTF-8です。
実践的サンプルのソースはそれぞれ以下で参照できます。
「紹介」「ノベル」「脱出」

なお、Windows上のChromeブラウザで動作確認しています。
他のブラウザではうまく動作しなかったり、
サウンドが鳴らなかったり、
見え方が異なることがあるかもしれません。

注意。

自分はスマホとかタッチ系デバイスを所有していないため、
それらデバイスでのタッチ動作を確認できていません。
ご了承ください。

CSSの一部では、「-webkit-」や「-moz-」などの
ベンダープレフィックスを使用している所がありますので、
ブラウザによって見え方が異なることがあります。

shadow系のcssが適用されている所では、
ブラウザによっては動作が重くなることがあるかもしれません。

いずれにしろ、
Windows上のChromeブラウザで動作確認できたら、
OKとしてしまっていますので、
その旨ご了承ください。