enchant.jsを使って酒を投げながらぞうと戯れるメカソン作ってみたぞう~ぞう Advent Calendar 2015~
ぞう Advent Calendar 2015の18日目です。
enchant.jsを使って酒を投げながらぞうと戯れるメカソン作ってみたぞう⤴︎。
どこかで飛行も覚えたようです。
[操作方法]
- 左右キー : 横移動
- 上キー : 上昇
- z : 酒を投げまくります(長押し可)
左右からからめっちゃぞうが飛んできます。
たまに勢いよく飛んでくるぞうに当たると、ふっ飛ばされます。
ブラウザ
chrome / safari / firefox(ちょっとカクカクする) / IE11
ちなみにIE10以下ではぞうは飛んでくるんですが、
なぜかメカソンの操縦ができず、フルボッコにされます。
ちょっと作りが甘いとこありますが、そこは多めに見てください。
PCでご覧ください。
mechason
以下、作ってみた背景をチラリ。
enchant.jsとは?
enchant.jsはHTML5 + JavaScriptで作る日本製のゲーム開発フレームワークです。
ボールが飛んでいく動きや、壁に衝突といった物理計算もしてくれます。
5年前くらいに流行っていたと耳にしました。
enchant.js
あれ?サーバー落ちてない?
大丈夫??
昨日サーバー落ちてました。
使ってみたきっかけ
enchant.jsを使ってみたのは面白いサイトを見つけたから。
日頃、Web制作のネタ集めにいろんな新着Webサイトのまとめを見ていて、
その時にたまたま見つけたサイト。
アミューズメント事業を行っている株式会社オフィスボストンのリクルートサイトです。
パチンコ飛び交うメインビジュアル。どうも規則正しく飛んでるわけでなくランダムっぽい。
「これどうやってんねん!!」と気になったのがきっかけ。
リクルートサイトだから期間限定かもです。
リンク切れてたらすいません。(その時は連絡いただけるとありがたいです)
そして、ソースみてたら「box2d」というjsを読み込んでる感じで、
そこからいろいろ辿ってたら、enchant.jsにたどり着きました。
enchant.jsの使い方
簡単に使い方を。
準備
公式サイトからファイル一式を落としてきます。
そして以下を読み込む
<script src="enchant.js"></script> <script src="Box2dWeb-2.1.a.3.js"></script> <script src="box2d.enchant.js"></script>
enchant.jsだけでもゲームは作れるそうです。
が物理エンジンを利用する場合は他の2つも読み込まないといけないようです。
JavaScript
jsファイルを作って処理を書いていきます。
大枠の構造はこんな感じになります。
// おまじない的な enchant(); window.onload = function() { var game = new Game(screen_width, screen_height); game.onload = function() { // 処理を書くところ } game.start(); }
処理の内容
先ほどの「処理を書くところ」に書いていくものを紹介します。
簡単に物体を作るところだけ。
// 決まり文句のようなもの // (0,5)は(横方向の重力,縦方向の重力) mechasonWorld = new PhysicsWorld(0, 5); for(i = 0; i < 100; i++){ // 地面 var floor = new PhyBoxSprite(16, 16, enchant.box2d.STATIC_SPRITE, 1.0, 1, 1, true); floor.image = game.assets["img/ground.jpg"]; floor.position = { x: i * 16, y: 600 }; game.rootScene.addChild(floor); } // メカソン生成 // PhyBoxSprite(横,高さ,動作,密度,摩擦力,反発力,フラグ) var mechason = new PhyBoxSprite(76,80,enchant.box2d.DYNAMIC_SPRITE, 0, 0, 0, true); mechason.image = game.assets['img/aizon.png']; // 位置 mechason.y = 300; mechason.x = 300; game.rootScene.addChild(mechason);
ざっくりとこんな感じで地面と、オブジェクトを作れるはず。
詳しくはGithubでソースを公開してるので、見てください。
GitHub
スターも待ってます(媚)
素材
メカソンの画像は@ƹɒTさんからいただきました。
あざます!
もうちょっとやりたかったこと
・攻撃判定でぞうが消えるとか。
・何か取ったらポイント入るとか何かそういうやつ。
次こそはもうちょっと改良して公開しようとか考えてて、ふと思った。
また仕事の役に立たぬものを作ってしまった…
おわり
参考にしたサイト
・「box2d.enchant.js」で、2D物理エンジンを使って遊んでみた!
・enchant.jsの2D物理シミュレーションのチュートリアルをやってみる~box2d.enchant.js
・自機のビームを連射できるようにする