このサイトは、只今WEB業界で活躍中のデザイナー、プログラマーの方々の情報を集めたweb統合情報サイトです。

Archives Details

enchant.js HTML5+JavaScriptでゲーム開発

JavaScript

2013.02.27

この記事は最終更新日から1年以上が経過しています。

enchant.js

http://enchantjs.com/ja/

記事を書こう書こうと思いましたら、色々と時は過ぎていくものですね。

もう、すっかり話題のenchant.jsについて書いていこうかと思います。

enchant.jsとは

A simple JavaScript framework for creating games and apps

と記されているとおり、そうです簡単なJavaScript でゲームやアプリを作れるフレームワークですよ!ってことですね。公式サイトに記述されているのですが、特徴は以下のとおりとなります。

  • カンタンにゲームやアプリを開発できる HTML5 + JavaScript フレームワーク
  • 2011年に公開され、すでに 1,000 本以上のゲーム/アプリが公開されています。
  • オープンソース (MITライセンス) で、無料で利用できます。
  • ドキュメント・書籍・チュートリアルサイトが充実し、沢山存在するプラグインで拡張可能。

製作されたのはユビキタスエンターテインメント(UEI)さんで今では世界中で多くの方が利用されているHTML5向けゲームエンジンとなっております。

ではでは、何が出来るのか?と使い方を覚えていきたいのですが、web上で編集でき、作成したscriptを実行出来るチュートリアル的なサイトCode9leapというサイトがございますのでそちらを利用しながら覚えていくと効率も良いかと思います。

Code9leap

Code9leapとは、webブラウザでenchants.jsの開発、実行テストなどが行えるサイトとなっております。

usernameとpasswordのみ登録なのですぐに開発が行えます。

Code9leap

http://code.9leap.net

サイトのTopページにも書かれていますが、HTML5投稿サイト”9leap”にも手軽に投稿が行えます。

こちらの9leapには実際、enchant.jsを使用して作られたゲームが沢山投稿されていますので、どの様なゲームが出来るかを確認するとよいかと思います。また、定期的にコンテストも行われており、賞金などもなかなかの具合ですので当方も参加しようか企んでおります。w

9leap

http://9leap.net

Code9leap使い方

それではCode9leapの使い方なんですが、まずはusernameとpasswordの登録を済ませると、すぐに開発出来る画面へと移ります。

すると、左側にサンプルプロジェクトのメニューがありますので、日本人であれば「はじめてのenchant.js」をクリックしましょう。クリックするとアコーディオンメニューなので、にょろっとコンテンツが出てきます。

STEP1から学んでいきたいので右側にある「Fork」ボタンを押すと、対象のサンプルコードをフォークし、自分の編集出来るファイルとなります。

フォークが終わると、右側にフォークしたソースの情報が表示します。さらに青い「Edit」ボタンを押すと編集、テストを行える画面へ遷移しますので早速クリック。

遷移すると以下のページとなります。

左から「実行画面」真ん中上「ファイル」「実行ボタン」「コード整形ボタン」「ファイル追加ボタン」「完了ボタン」「読み込んでいる画像」となっております。

それではscriptの方を覗いてみましょう。1行目にenchant();とあります。属に言う「おまじない」なのですが、全ての始まりはここからです。お風呂に入る前でもこれは記述して寝ることにしましょう。

enchant();

 

続いて、window.onload〜でwindowが読み込まれたときに実行する関数の中に実行したい内容を記述していきます。

まずあるのが、game = new Game();これも「おまじない」と覚え忘れずに記述しましょう。

game = new Game();

 

gameが読み込まれたときの関数、game.onload = function() {〜内に実際のゲームの動きを記述していきます。

hello = new Label("Hello,Bear001");

 

で「Hello,Bear」と書かれたラベルを作ります。(書かれているままですが。。)

hello.x = 10;
hello.y = 150;
game.rootScene.addChild(hello);

 

hello.x = 10はhelloのx座標10pxhello.y = 150はhelloのy座標150pxとなりますので、x座標10px、y座標150pxの位置に移動しております。最後に表示させるためにgameオブジェクトのナンバー変数rootSceneにaddChildで付与することによってhelloが表示する結果が得られます。

実行ボタンを押し、実行画面(プレビュー画面)をクリックすると、表示しているのが確認出来るかと思います。

このように、stepを踏んでenchant.jsを学んでいくことが出来ますので一通り扱っていくと良いかと思います。

ダウンロード

最後にダウンロードなんですが、enchant.jsのTopページから行うことが出来ます。

enchant.js

http://enchantjs.com/ja/

ダウンロードボタンを押すとダウンロードページへ遷移しますので、バージョンの記されたリンクをクリックするとダウンロードが始まります。

また、GitHubの方にもupされております。

GitHub

https://github.com/wise9/enchant.js

クローンする際は以下のコマンドを入力。

Git

git clone https://github.com/wise9/enchant.js.git

次回からはenchant.jsを使い何かを作っていこうかと思いますー。

ではでは。

Comment

Related Article

Vue.js + SSR (Universal JavaScript)環境を、「NUXT.js」でサクッと構築する方法。

2017.10.09

フロントエンド開発が捗る JSON Serverについて

2017.07.10

技術書、参考書のしおりには【BOOK DARTS】がオススメ!

2017.07.01

会社で npm Private導入して、1ヶ月で8個ほどパッケージ作成したお話。

2017.06.02

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「実装編」

2017.03.26

Vue.js が予想以上に良かったので、既存WordPressに導入。Vue.js (vue-class-component) + TypeScript + WordPress で作る、記事読み込み component 「環境構築編」

2017.02.21

Facebook製 JavaScript 関数ライブラリ。Immutable.js がいい感じ!

2016.07.31

【JS】フロントでレコメンドアルゴリズムを簡単実装できるJavaScriptライブラリ「RecommendJS」を公開しました。

2016.05.30

JavaScript ビット演算・ビットマスクについてまとめてみました。

2016.03.15

マテリアルデザイン対応!タッチ、クリックでエフェクト。RippleEffectJSを公開しました!

2016.02.01

CATEGORY LIST

LATEST NEWS

iPhoneXで、ubuntuを動かす。

サーバー

2018.06.09

仮想通貨(暗号通貨)の作り方 その2 (Gethの使い方)

暗号通貨、ブロックチェーン

2018.05.20

$PAC (パックコイン)Macでマスターノードを建てる方法

暗号通貨、ブロックチェーン

2018.05.14

ついに「ウェブ帳」リニューアルしましたぁ!!!(PC 版)

イベント

2018.05.07

Raspberry Pi 3 Model B+ 2018 ニューモデルを購入!!

RaspberryPi

2018.04.23

仮想通貨(暗号通貨)の作り方 その1

暗号通貨、ブロックチェーン

2018.04.09

iPad Proで開発を行いたい。

iPad

2018.03.29

CPU使用しすぎて、Conohaからサーバーシャットダウンされた件。

tool

2018.03.28

春の大掃除。VHSに続いて、カセットテープもデジタル化!microSD保存 MP3変換プレーヤーを使ってみた。

tool

2018.03.27

Macで、VHSダビング I-O DATA ビデオキャプチャー 「アナレコ」を使ってみた。

tool

2018.03.27

ご報告

イベント

2018.02.02

明けましておめでとうございます。(遅め

イベント

2018.01.16

RANKING

Follow

SPONSOR

現在、掲載募集中です。



Links

About Us

WEBデザイナーの、WEBデザイナーによる、WEBデザイナーの為のサイト。「みんなで書こう!」と仲間を募ってみたが、結局書くのは自分だけとなってしまいました。日々のメモを綴っていきます。

Entry Profile

Graphical FrontEnd Engineer
- Daisuke Takayama

MAD CITY 北九州市で生まれ育つ。20代はバンド活動に明け暮れ、ふと「webデザイナーになりたい。」と思い、デジタルハリウッド福岡校入学。卒業後、数々の賞を受賞、web業界をざわつかせる。
現在、主に、ゲーム制作中心に港区六本木界隈で活動中。

FOLLOW US