5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

enchant.js勉強する流れになったのでスタート[1日目]

Last updated at Posted at 2014-02-05

enchant.js勉強する流れになったのでスタート[1日目]
enchant.jsについてと、画像の読み込みまで。

#enchant.jsについて

##enchant.jsとは

  • もともとはプログラミング学習を目的として開発された
  • HTML5向けゲームエンジン
  • CSS3アニメーションやjQueryをを加えてもOK。
  • 0.6.x系以降でDOM→Canvasベースになったっぽい
    (PCブラウザはパフォーマンスがあがるけど、Android 4.1の標準ブラウザによる描画に不具合有)

##メリット

  • PCでもスマホでも遊べる
  • 他のJSライブラリと相性がいい
  • 他のゲームライブラリと比べると軽め
  • プラグインが豊富

[プラグイン]

##デメリット

  • AndroidでViewport指定を無視することがある
    (enchantのベージョンとブラウザの相性により都度修正が必要) 
  • 高解像度端末は低解像度のより動作速度が遅い
  • 画面いっぱいに広がる処理はカクつく
  • マルチタッチを扱うメソッドはない

##学習環境

#実際の組み立て

##命令文調べたかったらココ

##ゲームの組み立て方

  • ゲーム本体にあるCoreオブジェクトを設定
    Coreオブジェクトは rootScene を持っているので rootScene の上にくまを表示させる
  • くまはSpriteオブジェクト(bearというオブジェクトをつくる)
main.js
enchant();

window.onload = function () {

  //coreオブジェクトの設定
  var core = new Core(320,320);
  core.preload('chara1.png');
  core.onload = function() {

    //bearオブジェクトの設定
    var bear = new Sprite(32,32);
    bear.image = core.assets['chara1.png'];
    bear.x = 0;
    bear.y = 0;
    
    //coreにbearオブジェクトをのっける
    core.rootScene.addChild(bear);
  };
  core.debug();
  // core.start();
};

##デバック
core.start();の代わりにcore.debug();を使うと、赤枠がでてデバックしやすいみたい

##参考サイト


Flashっぽいので、なんとなくわかる気がする...


5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?