こんばんわ。 deokisiです。 画像リソースが全て揃っている場合にはプリロードで事足りるんですが、ゲーム開始以降は当然ながらプリロードは使えず、ロードを使う必要があります。 (ゲーム実行中に非同期に色んな人のtwitterアイコンとか表示したい時とか・・・) ロードの場合にCB関数への通知が来るのですが、CB関数内でロードされた画像が何であるかわからないと期待するSpriteオブジェクトへの設定ができないです。 んー、どうやるんだろう？ CB関数内部でthisオブジェクトを探ってみると、_elementオブジェクトにsrcってのがあって、ここに画像のパスが格納されていました。 あー、これを使えば名前でチェックできそうですなー。 ロード開始時にこちらのthisオブジェクトにパラメータ追加とかできれば、もっとスマートにできそうなのですがよくわかんないので、これでやってこうかなと思います。
enchant.js でゲームを作る時、効果音やBGMの再生には Sound クラスを使う。音声ファイルは、Gameクラスのpreload関数を使って、ゲーム開始前にダウンロードしておく。例えばこんな感じ。 window.onload = function() { var game = new Game( 320, 320 ); game.preload( "hoge.wav" ); //! game.assets["hoge.wav"] にSoundインスタンスが格納される //: game.assets["hoge.wav"].play() //: }; しかし、MacのSafariでこのコードを動かすと、game.preload で処理が止まってしまう。Sound.load関数を使ってもうまくいかない。将来的にはSafariもしくはenchant.jsの改善で根本問題が解決するだろう
![[enchant.js] Safari での Sound の扱い - のぶきちの日記](https://cdn-ak-scissors.b.st-hatena.com/image/square/0796e3dcbcead10a1557c52b0902e60066e3eef3/height=288;version=1;width=512/https%3A%2F%2Ffanyv88.com%3A443%2Fhttps%2Fcdn.image.st-hatena.com%2Fimage%2Fscale%2Fbb42f688959d2eca503d1b10709e1e00f04b0778%2Fbackend%3Dimagemagick%3Bheight%3D1300%3Bversion%3D1%3Bwidth%3D1300%2Fhttps%253A%252F%252Fcdn-ak.d.st-hatena.com%252Fdiary%252Fnobu_kichi%252F2012-03-24.jpg)
はてなのアクセス解析のぞくと、Nodeの表示順で検索されて当方のブログに辿り着く方がいらっしゃるようで。enchant.jsもバージョンが上がったことですし、ここいらで再度まとめてみたいと思います。 まずは基本のおさらい。 enchant.jsでは、addChildをすると手前に、手前にという具合にNodeを重ねていきます。 for (var i = 0; i < 3; i++) { var spr = new Sprite(32, 32); spr.image = game.assets['chara1.png']; spr.frame = i; spr.x = i * 8; game.rootScene.addChild(spr); } 上述のコードの場合、最後にaddChildされたframe == 2のSpriteがもっとも手前に表示され、その後ろにframe == 1、frame
まだ結構すごろく生成部分にバグあるだろうけど、PCが返ってきてない*1のでまあそれはおいておくとして、とりあえずenchant.jsのテストがてら作っていたすごろくシーンのイメージをアップ。 http://tsuge.sub.jp/sugoroku/blog/sugoroku/test.html 最初の画面でタッチするか、Enterキーでメニューを出して、メニュー左上のボタンを押すとサイコロ転がして移動出来る。 移動時の通路判定とかは一切してないので、道がないところももりもり動けるし、ゴールしてもなんの特典もないし、画面外にも動ける点など諸々ご容赦を。 enchant.jsに慣れる目的だったので、その辺りでいくつか気づいた点があるので、メモ。 レイヤーが無い えー、そうだっけなぁと思ったんだけど、enchant.jsにはレイヤーが無い。 正確にはレイヤーというクラスはあるけど、これは画面に
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
メモ:enchant.js 最初のプログレスバーを出さない方法
enchant.js でゲームを作ると、開始直後、Game.preload() を使って画像などを読み込んでいる間、Game で確保した表示領域いっぱいにプログレスバーが表示される。 読み込みに時間がかかるときはにはありがたいのだが、先読みするデータが少ないときは一瞬だけ黒くなってすぐゲームが始まるので、ない方がよい。 ということで表示させない方法を調べてみたが、ドキュメントには特にない。 ソースを追っていくと 'Scene displayed during loading.' とコメントあるところで処理している。 コメントから２行目のthis.loadingScene.backgroundColor = '#000';をthis.loadingScene.backgroundColor = '#FFF';にしてその直後からthis.loadingScene.addChild(bar);ま
5分でわかる enchant.js アニメーション機能 1. 5分でわかるenchant.js アニメーション機能@sidestepism2013/05/29v0.7 対応版更新 2. 自己紹介伏見 遼平(株)ユビキタスエンターテイメント秋葉原リサーチセンター (UEI/ARC)9leap プロジェクトリーダー 3. たとえば「クマを移動させたい」としたら… 4. bear.addEventListener(“enterframe”, function(){bear.x ++;});// -> 1フレームに1ピクセル移動する 5. 動いた! 6. 止まらない… 7. bear.addEventListener(“enterframe”, function(){if(bear.x < 100)bear.x ++;});// -> 100ピクセルだけ移動させる 8. 今度は 9. 止まった!
JavaScript, Game | 17:11 | CoffeeScriptからenchant.jsを叩いて使ってみたところ、スゴい速さでクロスプラットフォームなゲームができあがって、非常に開発がしやすい感じだったので、今回の開発についてまとめてみました。この方法でゲームを開発すると 実行環境構築が不要で クロスプラットフォームでスマートフォンでも動き 開発しやすく 凄まじい速度でゲーム開発ができます。enchant.jsとは、国産のJavaScriptで実装されたゲームフレームワークです。 ドキュメントやサンプルが充実しており、初学者でも敷居が低いのが特徴です。enchant.js - HTML5 + JavaScript Game Engine CoffeeScriptとは JavaScriptにコンパイルすることができる 文法ミスの場合、コンパイルできないため、エラーに気付きやすい
どうもです。 最近、話題の(?)enchant.jsを触っていますです。 enchant.jsって何!?とか、enchant.jsの使い方などなどは色々なブログで紹介されているので、そちらを見てください。 enchant.js 怒涛の 100 tips ←この記事とかすごいです。基本が網羅されてる。 で、今回は大規模なjavascriptの開発について覚え書き。 enchant.jsのドキュメントやチュートリアルを見ていると、基本的に1ファイルにまとめて書かれており、何も工夫せず開発を行うと保守など不安です。。 単にファイルを分けただけでは複数のファイルを読み込む必要があるため、何か良い方法はないかと模索。 ...ふとjQueryの開発コード(GitHub)を見てみると、Makefileなるものが！！ と言うことで、jQueryを真似て "make" する事にしました! Makefileを
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. enchant.js 怒涛の 100 tips!! ローカル整理してたら昔勉強がてら作った enchant.js のサンプルが大量に出てきたので, 整理するついでに公開しようと思います. 最終的に 100超えちゃったけどw(全部で102個あります) 逆引きてきな感じでまとめてます. 参考になれば幸いです. 全て jsdo.it に移植したので Web上で実行できます!! fork なりダウンロードなりして遊んでくださいな♪♪ Tips Base(基本) 基礎です. enchant.js のテンプレートを用意しよう Entity(エンティティ) 表示物系の基底クラスです. 内部で DOM を持っているので表示は
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
4月21日、東京・神田で開催されたenchant.jsのユーザー交流会、『enchant.js meetup Tokyo vol.2』に参加してきました。取材、というほどカッコイイ密着じゃなく、前半は自宅でUst視聴、後半の90 Minutes Challenge（90分でゲーム開発をするハッカソン）から合流して、そのまま参加した皆さんとの懇親会へというハイブリッド参加です。 僕が文字でレポートするよりも、当日のスライドシェアやtogetterのまとめなどを見たほうが雰囲気がわかると思うので、今回はざっと注目点をまとめます。 まず演目は、午前に初学者向けのenchant.jsチュートリアル、13時～16時が開発陣による「enchant.jsでゲームを作るコツ」「gLenchant.jsで始めるWebGL 3Dプログラミング」などのほか、参加者による5分しばりのライトニングトーク「それ、Co
モバイルゲーム 物凄い勢いで勃興したモバイルゲーム業界は、いろいろな課題や問題に直面しながらも巨大化し、今日の時点でのスマートフォン向けゲームの市場へと継承されていきます。 モバイルゲームの歴史 2001 Javaアプリと3Dゲームの登場 Javaが利用できるようになったことにより、ダウンロード型のゲームが供給できるようになりました。 2002 携帯電話端末の大容量化・3D化競争 Java搭載携帯電話端末が登場してからごく僅か1年の間に、アプリのサイズに関しては10倍に広大化し、表現方法も2Dから3Dにシフトし始めました。J-PHONEは『ゼビウス』や『スペースハリアー』などといった昔のアーケードゲームを、ドコモはSIMCITYなどパソコンで世界的規模のヒットを飛ばしたゲームを主力商品としていました。 2003 モバイルゲームの一般化 メモリの制限が厳しいJava仮想マシン上ではなく、OS
4. Node ● サーバサイド javascript ● イベントドリブン ● シングルスレッド ● C10K(1 万クライアント ) 問題に対応 ● javascript は遅そう？ → javascript は今や遅くない 5. websocket ● はやりの HTML5 な技術 ● http 上で VPN 張るイメージ ● socket.io というフレームワークが超優れもの → websocket 非対応のクライアント上でも同 じ API で通信できる
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. 9leap の開催と共に流行っている JavaScript のゲームライブラリ enchant.js . 面白そうだったのでさっそくダウンロードしてゲームをつくってみました. 使い方を学ぶためにざっくりとStepに分けてまとめてみましたのでよかったら参考にしてみてください. 全体的にコード多め, 解説少なめです. ※ 実装コードとドキュメントを見ながら勝手に作ったものなので 意図した使い方と違った場合はスイマセン. SAMPLE and DATA 完成したものはこちらで遊ぶことができます. 30秒以内にどれだけ玉をタップできるかを競うゲームです. ゲーム性は皆無ですが, あくまで enchant.jsを学ぶた
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
