Nintendo 3DS ネットワークIDのリセット

Nintendo 3DS の設定画面を開いて、
下画面の上枠部分にある「ニンテンドーネットワークID設定」から
パスワードをリセットすることができます。
登録してあるメールアドレスにリセットされたパスワードが送信されるので、
それを使ってログインした後、任意のパスワードに変更して下さい。

3DS: もぐらたたき for 3DS が遊べなくなっていた

久しぶりに以前 3DS の Web ブラウザ向けに enchant.js で作ったもぐらたたきを遊ぼうとしたところ、下のような画面が表示されました。

「申し訳ありませんが、リクエストされたページでは最新の技術が使用されているため、ご使用の携帯では利用できません。」

アプリは Google App Engine 上で動かしているのですが以前はこのような表示は出てきませんでした。

知らない間にこのような表示に変わっていたので驚きました。多分 App Engine 側で処理が追加されたのかなと思います。

あとで別のサーバ上にファイルを置いて試してみようかと思ったのですが、もともと App Engine 用に書いていたのでパスの指定部分など細かいところで書き直しが必要になるかと思います。放置していたためかランキングも動いていない模様・・・。

やっぱり LAMP 環境で動くもので書いたほうがいいかなと思いました。（なぜか App Engine + Go で書いていた）

ニンテンドー3DSのペアレンタルコントロールは外せるのか？

子供がニンテンドー3DSのペアレンタルコントロール機能を外してインターネットに接続し、犯罪に巻き込まれる事件がありましたが、そもそもペアレンタルコントロール機能は簡単に外せるのでしょうか？

ペアレンタルコントロールについてはこちらを参照
お子様がプレイされる際にお伝えしたいこと「保護者による使用制限機能」について | Nintendo

無料で付いているフィルタリングソフト
i-フィルター for ニンテンドー3DS | i-フィルター

ペアレンタルコントロールを試してみたところ、４桁の暗証番号を入力すれば制限は外せるようです。また、入力回数に制限がないようなので最大で 0000 ~ 9999 まで１万回ひたすら入力すれば外せますね。どうしても・・・という場合は定期的に暗証番号を変更すると良いかと思います。

3dsブラウザで blur が効かない

3ds のウェブブラウザでは、画面上に <button> や <input> や <a> などがあるとき十字キーでフォーカスを合わせることができます。

フォーカスを合わせると青いラインで囲われて、その状態でAボタンを押せばイベントが発生します。

十字キーでフォーカスが当たる

Bボタンを押すとフォーカスが解除されます。

この Bボタンの動作をJavaScriptから発生させる方法がわかりません。
他のブラウザなら blur イベントを使ってフォーカスを外すことができるのですが、
3ds では blur に反応してくれません。

フォーカスが当たっている状態で、CSS の display を none にして画面から消すと、
青い枠は消えてくれます。
しかし、display を block にして再表示すると、十字キーでフォーカスが合わなくなってしまいます。
この場合、画面上を１度タッチすることで、再びフォーカスを合わせることができるようになります。
内部で選択状態を保存していて、CSS を操作するだけではダメなようです。

ゲーム内のボタンやメニューを十字キーで操作させたいときは、
<div> タグと JavaScript で自分で作成するのが良いと思います。
リバーシ for 3DS では、メニューはすべて <div> にしています。

リバーシ for 3DS を公開

Nintendo 3DS のウェブブラウザで遊べるリバーシを公開しました。

公式サイト： http://yokano.github.io/reversi3ds/
アプリ本体： http://okanoworld.appspot.com/reversi3ds
(アプリは 3ds のウェブブラウザ専用です)

MITライセンスです。公式サイトからソースコードが落とせます。

3DSのWebブラウザ上で動きます

十字キーとAボタンで操作出来ます

ウェブアプリですが、十字キーとAボタンで遊べます。
もちろんタッチペンでも操作出来ます。
CPU と対戦することができます。１台で２人対戦することもできます。
２人対戦はタッチペンが２本あるとやりやすいかも。

十字キーの上下で画面がスクロールされないようにコンテンツを下画面にフィットさせています。(320x212px)
イベントのコールバック中に return false; しても、
preventDefault() してもイベントがキャンセルできないため、
コンテンツを２画面に広げてしまうと十字キーの上下でスクロールが発生してしまいます。
２画面で十字キーの上下を使えれば理想なのですが・・・。

Canvas は使わず DOM で動作しています。
アニメーションはスプライトを作成して、CSS の background-position を操作しています。
3ds は @keyframe にも対応しているのですが、step() を指定できずパラパラアニメができません。
結局、JavaScript から定期的に background-position を操作しています。
アニメはすべて CSS でやりたいのですが、良い方法が無いものか・・・。

3ds で animation-timing-function:steps() が動かない

3ds のウェブブラウザは CSS の keyframe-animation に対応しています。
animation-timing-function に linear や cubic-bezier() を指定すると動作するのですが、
steps() を指定しても動作しませんでした。

steps(1) を指定すると PC ではフレームの切り替えを 1 ステップでやってくれるため、
パラパラ漫画になるのですが、
3ds では ease を指定した時と同じように切り替えがなめらかになってしまい、
パラパラ漫画になりません。余計な切り替えアニメーションが表示されてしまいます。

そのため、キーフレームアニメーションを使ってパラパラアニメが作れません。
cubic-bezier() を使ってフレームの遷移速度を速くすることはできるものの、
フレームが切り替わる余計な部分も表示されてしまいます。

@-webkit-keyframe 内で background-image を変更してみても
PC だけしか反応してくれませんでした。

3ds で -webkit-animation-timing-function: steps(1) が指定出来れば楽なんですが・・・。
パラパラアニメは JavaScript のタイマーを使って css をいじるしかないのでしょうか。
うーむ・・・。

#animation {
 position: absolute;
 left: 100px;
 top: 100px;
 width: 25px;
 height: 25px;
 
 background-image: url('img/piece.png');
 background-position: 0px;
 -webkit-animation-name: play;
 -webkit-animation-duration: 1s;
 -webkit-animation-timing-function: steps(1);  /* 3dsで無効 */
 -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes play {
 0% { background-position: 0px; }
 17% { background-position: 25px; }
 34% { background-position: 50px; }
 51% { background-position: 75px; }
 68% { background-position: 100px; }
 85% { background-position: 125px; }
 100% { background-position: 150px; }
}

もぐらたたき for 3DS を公開

もぐらたたき for 3DS を公開しました。
Nintendo 3DS のウェブブラウザ上で動作するブラウザゲームです。
3DS 以外の PC やスマートフォンのブラウザでも動作します。

アプリ本体
http://okanoworld.appspot.com/mogura

ソースコード
http://yokano.github.io/mogura/

3DS のウェブブラウザで遊べます

ゲームエンジンとして enchant.js を使用しています。
3DS 上では思っていたよりもパフォーマンスが出せず、
９箇所の穴から９つのもぐらのスプライトを出すだけで処理落ちが発生しています。
フレームの処理が遅いため、fps を 30 などにするとスローモーション状態です。
結局、fps を 5 に設定しています。
タッチイベントを ontouchstart で取得していますが、こちらも 0.5 秒近くラグがあります。

９つの穴からもぐらが出現

ランキングにも対応しており、上位 10 までをランキング画面で確認できます。
サーバを Google App Engine + Go でつくり、Ajax で名前とスコアを送信しています。
Ajax は問題なく動作しました。GAE の Channel API による Ajax ポーリングが処理できるか試してみたいですね。

ランキングに登録

ランキング画面

実行中に「画像の表示に失敗しました」や「スクリプトの実行を停止します」と表示され、実行が止まることがあります。

コンソールがないため原因がわからないのですが、表示される場合とされない場合があります。
メモリの使い過ぎかと思い、画像を jpg にして容量を抑えたりしましたが変わりませんでした。
その他の Web サイトをサーフィンしていても発生します。
3DS の Web ブラウザは、アクションゲームや画像の多いゲームは厳しいことがわかりました。

次回は 3DS のブラウザで遊べるソーシャルゲームを作ってみようと思っていますが、上記の問題で厳しければ、また別のものを考えます。

3DSブラウザで画像表示

ゲーム画面のバランス確認のため、3DS に静止画を表示しました。

もぐらたたき

Nintendo 3DS は Web ブラウザとして NetFront Browser を採用しています
http://www.nintendo.co.jp/3ds/hardware/features/browser.html

解像度は上が 800x240px 、下が 320x240px です。
http://www.nintendo.co.jp/3ds/hardware/spec/index.html

今回はゲームの解像度を 320x480px にして、上下の画面にきっちり表示させました。
下画面にはメニューバーが必ず表示されるので、下画面のコンテンツの高さは約 210px しか使えません。

デフォルトではコンテンツの幅 980px を画面に表示しますが、スマートフォンと同様に viewport で設定可能です。今回は width = 380px を指定しています。

3DS のブラウザでゲームをしようとすると、スクロール機能が邪魔になってしまいます。
コンテンツの幅を 380px にすると左右へのスクロールは禁止できるのですが、
コンテンツの高さを 480px にしても、それを超えてスクロールできてしまいます。

コンテンツの上下に画面１つ分の空白が作成されるため、余計なところまでスクロールできてしまいます。

コンテンツの上下に１画面分の空白が作られる

理想的にはこの状態で固定したい

空白も含めてスクロールできてしまう

スクロールを禁止する方法は見つからなかったのですが、ずれた画面をフォーカスする方法はありました。十字キーの下ボタンを押すとズレた画面が本来の場所に戻ります。

十字キーの下を押すとコンテンツの下端（空白を含まない）を、下画面の下枠にフィットさせる位置までスクロールすることができます。余計な空白まで表示しないため、画面がずれてしまったら下ボタンを押して元の場所に戻すようにしようと思います。

ScrollTo() を使って画面をスクロールする方法もあるようなのですが、うまく動かなかったため手動で戻すことにします。画面がスクロールするたびに ScrollTo() で元の場所に戻すという方法もあるかもしれません。