【小中学生のための】JavaScriptによるシューティングゲームの作り方(1)【ブラウザだけでOK】:電脳ヒッチハイクガイド:電脳空間カウボーイズZZ(電脳空間カウボーイズ) - ニコニコチャンネル:生活 enchant.jsを使ってシューティングゲームを作るという連載が…

hackforplayのダウンロード｜Daiki Teramoto｜note ソースコードに隠された謎を説きながら冒険を進めろ! ゲームでプログラミングを学べるhackforplay / shi3z:電脳ヒッチハイクガイド:電脳空間カウボーイズZZ(電脳空間カウボーイズ) - ニコニコチャンネル:生…

jsdo.itの画面サイズがどうなっているか調べるために、32x32のキャラクターで敷き詰めてみた。 フルスクリーン表示にするとちゃんと全部でるのだが、エディタやコードが一緒に表示されている状態では右や下が切れてしまう。マウスでクリックすると右や下にス…

jsdo.it上でコーディング中。以前書いたコードをフォークして使おうと思ったが、enchant.jsのバージョンが0.4や0.5など古いものだったので、新規で作成して、バージョン0.6.2を組み込んだ。

4桁の数字をSpriteで描画するクラスを作成した。 ゲーム内での数字の描画に利用する予定。 あとはサイズや色を指定できるようになればもっと使い勝手が良くなるだろう。 jsdo.itで公開。テストとしてランダムな位置に表示して、一定時間、Y方向上に移動した…

util.enchant.jsにはタイマーを表示するクラスも用意されている。 var timeLabel = new TimeLabel( x, y, type ); 3番目の引数に何も指定しないとカウントアップになり、"countdown"という文字列を指定するとカウントダウンとなる。カウントはtimeプロパティ…

数字の表示をなんとかできないかと本を読んでいたらScoreLabelというものがあることを知った。スコアを表示するクラスでutil.enchant.jsに定義されている。 var core = new Core(320,320); var scoreLabel = new ScoreLabel(10,10); scoreLabel.score = 0; c…

ドットインストールでenchant.jsのレッスンを見ていたところ、最初にCoreというクラスを作ってそれにSpriteを追加していたりした。Gameじゃないのかなとドキュメントを見てみたら、Game = Core とあった。 enchant.Game | JsDoc Reference 説明に次のように…

今回もドットインストールのレッスンを見ていて初めて気がついたのだが、新しいバージョンになってexamplesフォルダ内にあるサンプルプログラムもいろいろと変わっていた。 初心者向けと上級者向けに分かれていたり、プラグインを使ったサンプルやWindows8用…

enchant.js - A simple JavaScript framework for creating games and apps. ドットインストールのenchant.jsのレッスンを見ていたら、自分が持っているバージョンよりも新しいのが公式サイトに上がっていることを知ったのでさっそくダウンロードした。 ダウ…

http://dotinstall.com/lessons/basic_enchant_js_v2 http://dotinstall.com/lessons/kuma_catch_enchant_js_v2 ドットインストールに最新のenchant.jsに対応したレッスンが追加された。 今度はクラスについても解説があるらしい。クラスはいまいち理解しき…

プラグインはenchant.jsを展開したフォルダにあるpluginsフォルダに保存されている。ここから作っているプログラムのローカルフォルダにコピーして参照すれば良い。プラグインによってはimagesフォルダにある画像を参照していることもあるので、そちらもコピ…

enchant.jsでは様々なプラグインが利用出来る。 jsdo.itではAdd Libraryのボタンから簡単に追加することができる。ローカルで使う場合はHTMLファイルに次のように記述すれば良い。(12/24追記 jsdo.itのサーバーに負荷がかかるのでこの方法はやめたほうが良い…

ゲームのキャラクタを状態に応じて動作を変えるような場合、C言語とかではif文やswitch文を使って処理を切り替えたりする。 void update() { switch( state ) { case WAIT: wait(); case MOVE: move(); } } C++ならデザインパターンのstateパターンやcommand…

イベントリスナの登録方法には2通りある。on+イベント名による登録と、addEventListener()による登録。たとえばenterframeイベントを登録する場合は次のような感じ。 on+イベント名の場合 var sprite = new Sprite(32, 32); sprite.onenterframe = function(…

enchant.jsの以前のバージョンではMapを使ったときGoogle Chromeだと正しく描画されないバグがあった。最新版ではどうなっているかローカルで作成して試してみた。 結果は期待したとおりに正しく動作した。描画系の部分が変更されたので正しく動くようになっ…

wise9 › enchant.js v0.6.0 リリース! アップデートの内容紹介 enchant.jsの新しいバージョンがリリース。 特に描画系が大きく変わっている模様。APIは変わっていないので今までと同じように使える。これは助かる。 jsdo.itでのenchant.jsはまだ古いバージョ…

nineleap.enchantを組み込むと自動的にSTART画面が付くようになり、Gameオブジェクトのend()メソッドを呼べばGAMEOVER画面になる。 これは便利なのだが、ゲームをクリアしたときもGAMEOVERとなってしまうのはなんとなく気になる。出来るならCLEARと表示した…

以前、Flashで実装した(id:toburau:20100427)電子玩具のライツアウトをenchant.jsでも実装してみた。 相変わらず、自分はたまにしかクリア出来ない・・・。 9leapへの投稿も試してみたがうまくいかなかった。なにか設定が間違っているのかも知れない。また明…

以前、Flashで作ったパズルゲームをenchant.jsで実装してみることにした。 とりあえずはパーツの描画から。 パズルゲーム用の素材が公開されていたので、それを利用させてもらうことにした。 http://enchantjs.com/assets/images/puzzle.png あっという間に…

enchant.jsでサウンドを再生するには、まずSoundオブジェクトのload()メソッドでサウンドファイルを読み込んでから、play()で再生する。 var se = Sound.load("test.wav"); se.play(); 実際に試してみたところ、たしかに音は再生されるが、再生中に再びplay(…

enchant.jsでマップを生成するには2次元配列が必要になる。この2次元配列のコードを書くのが非常に面倒。サンプルコードを入力しているときも大変だった。 自分はC++とかでゲームを作るときはテキストファイルにマップデータを定義して読み込むなど、データ…

ゼロからはじめるenchant.js入門の4.3「マップの利用」のサンプルコードが正しく動作しなかった。明らかにおかしい動作が2点あり。一つはキャラクターを移動させたときのアニメーションが正しく再生されない。もうひとつはマップの下の方や右の方へ移動した…

enchant.jsの本に載っていたサンプルコードを打ち込んでテストしてみたが、期待したとおりに動作せず。よくコードを見なおしてみても違うところは無い。ということで、jsdo.itに登録されているサンプルコードを実行してみたら、同じ動作。つまりサンプルコー…

以前、マップチップを敷き詰めて背景を描画する方法について書いた([id:toburau:20120711]) コメントでSurfaceのサイズをマップチップ1個と同じにすれば自動的に敷き詰められると教えてもらったので、試してみた。 var bg = new Sprite(320,320); var maptex…

enchant.jsではプロジェクトに「nineleap.enchant.js」を追加すると、スタート画面とゲームオーバー画面が追加される。 プラグインは、jsdo.itのAdd LibraryでInput URLに「9leap」をcodepathに「nineleap.enchant」を入力して追加する。 プラグインを追加す…

本に載っているenchant.jsのサンプルコードを打ち込んでいて、ちょっと驚いたことが。 上から落ちてくるリンゴを拾うというゲームで、そのリンゴをステージに追加するメソッドをGameオブジェクトに追加していた。JavaScriptには動的にオブジェクトにメソッド…

enchant.jsではシーンを作成して、それにスプライトやラベルなどの描画オブジェクトを追加することが出来る。最初から用意されているのがルートシーンで今まではこれにスプライトを追加してテストしてきた。 このシーンはスタック構造になっているので、シー…

jsdo.itでバーチャルキーパッドを使うにはプラグイン「ui.enchant.js」を追加する必要がある。Add LibraryのInput URLで、usernameに「9leap」、codepathに「ui.enchant」と入力して追加する。 バーチャルパッドは次のように生成して表示オブジェクトツリー…

enchant.jsの入門書を読みながら、マウスでキャラクターを移動させる方法を学ぶ。 今まではパッドやカーソルキーで入力した方向へとキャラクターを移動することばかりやっていたので、今回のようにマウスでクリックしたところへ移動するというのはあまりやっ…