Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
15
Help us understand the problem. What is going on with this article?
@alingogo

createjs入門(EASELJS, PRELOADJS)

More than 5 years have passed since last update.

ゴール

  • createjsライブラリ群を理解できる
  • 気になる件を理解できる

createjsとは

CreateJSは実際は4つのライブラリからなるライブラリ群で次のライブラリによって構成されています。

PreloadJS

目的

  • ゲームなどWebサービスを開発する時に、イメージ、音声など要素をロードする場合
  • 要素が全部ロード完了後に、ゲームが始まることができる

example

  • コード
        var manifest = [{
                    id : "blue",
                    src : "https://upload.wikimedia.org/wikipedia/commons/3/3f/Button_Icon_Blue.svg"
              }, {
                    id : "red",
                    src : "https://upload.wikimedia.org/wikipedia/commons/0/07/Button_Icon_Red.svg"
              }];
      var queue = new createjs.LoadQueue();
      queue.addEventListener('fileload', function(event){
          console.log('fileload');
          console.log(event.item.id); // blue or red

      });
      queue.addEventListener('complete', function(event){
          console.log('number of loaded file');
          console.log(event.target._numItems); 
      });
      queue.loadManifest(manifest);  
  • consoleからの出力
fileload
blue
fileload
red
number of loaded file
2

説明

  • listenerを追加
loadQueue.addEventListener

EaselJS

目的

  • canvasの表示と操作方法について、簡単にイメージを作りたい
  • stageを理解できる
  • 関連の気になったことを理解できる

example

  • コード
index.html
<canvas id="myCanvas" width="500" height="300"></canvas>
index.js
var canvas = document.getElementById("myCanvas");
var stage = new createjs.Stage(canvas);
stage.canvas.width = 1000;
stage.canvas.height = 500;
var child = new createjs.Bitmap("child_blue.png");
child.x = 50;
child.y = 50;
child.scaleX = 0.2;
child.scaleY = 0.2;
stage.addChild(child);
stage.update();

説明

ロミオとジュリエット.png

  • stage新規
var stage = new createjs.Stage(canvas);
  • 要素新規
var child = new createjs.Bitmap("child_blue.png");
  • 要素位置とスケールを定義
child.x = 50;
child.y = 50;
child.scaleX = 0.2;
child.scaleY = 0.2;
  • 要素追加とstage更新
stage.addChild(child);
stage.update();

気になったこと

背景画像のサイズと合わせる

        $(window).on("resize", function() {
            $("#canvas").width($("#image").width());
        });

Child位置範囲

        stage.canvas.width = STAGE_WIDTH;
        stage.canvas.height = STAGE_HEIGHT;

イメージロード

map = $("#image");
map.bind("load", completion);

15
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
alingogo
jrits
信頼と魅力のある先進のITをもとに、お客様のワークスタイル・イノベーションの実現を目指します。

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
15
Help us understand the problem. What is going on with this article?