CreateJS基础 学习笔记(上)

1.CreateJS介绍

了解CreateJS
1.CreateJS:
    一款HTML5游戏开发的引擎
    CreateJS是一套可以构建丰富交互体验的HTML5游戏的开源工具包,旨在降低HTML5项目的开发难度和成本,让开发者以熟悉的方式打造更具现代感的网络交互体验.
2.CreateJS中包含四款工具
    EaselJS:用来处理HTML5的canvas
    TweenJS:用来处理HTML5的动画调整和javascript属性
    SoundJS:用来帮助简化处理音频相关的API
    PreLoadJS:管理和协调程序加载项的类库

1.EaselJS

需要:easeljs-0.7.1.min.js

    <canvas id="gameView" width="400px" height="400px" style="background-color: #ffff00"></canvas>
    <!--代码从上到下  所以这里写下面-->
    <script src="js.js"></script>

js.js

var stage = new createjs.Stage("gameView");/*选择舞台的(id)*/

var text = new createjs.Text("HELLO EASELJS","36px Arial","blue");

stage.addChild(text);

stage.update();//刷新舞台

-

2.TweenJS

除了easeljs-0.7.1.min.js

还要tweenjs-0.6.0.min.js

<canvas id="gameView" width="400px" height="400px" style="background-color: #ffff00"></canvas>
<script src="js.js"></script>

js.js

var stage = new createjs.Stage("gameView");

stage.x = 100;
stage.y = 100;
var circle = new createjs.Shape();

circle.graphics.beginFill("red").drawCircle(0,0,50);//圆心坐标0,0;半径50

stage.addChild(circle);
/*stage.update();*/
createjs.Tween.get(circle,{loop:true})//动画
    .wait(1000)//等1s
    .to({scaleX:0.2,scaleY:0.2})//缩放
    .wait(1000)
    .to({scaleX:1,scaleY:1},1000,createjs.Ease.bounceInOut);//缩放,1s后颤动
createjs.Ticker.setFPS(20);
createjs.Ticker.addEventListener("tick",stage);//tick不能改

3.SoundJS

需要soundjs-0.6.0.min.js

<div>
    <h1 id="status">开始</h1>
</div>
<script src="js.js"></script>

 /*如果只是放歌，个人觉得Audio标签比这方便多了*/

var displayStatus;
displayStatus = document.getElementById("status");
var src = "周杰伦 - 彩虹.mp3";
createjs.Sound.alternateExtensions=["mp3"];//确定播放mp3
createjs.Sound.addEventListener("fileload",playSound);//资源准备好触发
createjs.Sound.registerSound(src);//加载资源

displayStatus.innerHTML="等待资源加载";

function playSound(e){
    soundInstance = createjs.Sound.play(e.src);
    displayStatus.innerHTML="播放:"+ e.src;
}

4.PreLoadJS

需要preloadjs-0.6.0.min.js

<style>
    .image{
        max-width: 320px;
        max-height: 240px;
        border: 1px solid #555;
        margin: 5px;
    }
</style>

    <img class="image" id="a">
    <img class="image" id="b">
    <img class="image" id="c">
<script src="js.js"></script>

</pre><pre name="code" class="javascript">var preload;
preload = new createjs.LoadQueue(false, "image/");

var plugin = {
    getPreloadHandlers: function () {
        return {
            types:["image"],
            callback: function (src) {
                var id = src.toLowerCase().split("/").pop().split(".")[0];//浏览器报错,defeat,本js不是重点.
                var img = document.getElementById(id);
                return {tag: img};
            }
        }
    }
};

preload.installPlugin(plugin);
preload.loadManifest([
    "a.png",
    "b.png",
    "c.png",
    "d.png"
]);

2.CreateJS基础

1.EaselJS容器

    <script src="../../easeljs-0.7.1.min.js"></script>

<canvas id="gameView" width="400px" height="400px" style="background-color: pink"></canvas>
<script src="js.js"></script>

直接在Stage上操作(js.js):

var stage = new createjs.Stage("gameView");//canvas的id

var Rect = new createjs.Shape();//创建可绘制的图形
Rect.graphics.beginFill("red");//颜色  graphics:绘图
Rect.graphics.drawRect(5,5,50,50);//四个方向
stage.addChild(Rect);//添加子视图

//舞台操作,一般不用,用container
stage.alpha = 0.5;//舞台半透明
stage.x = 100;//x向右100,初始左上角
stage.y = 100;//y向下100
stage.scaleX = 2;//X轴放大2倍
stage.scaleY = 0.5;//Y缩放2倍

stage.update();//舞台刷新

将js.js替换,使用容器:

var stage = new createjs.Stage("gameView");
var gameView = new createjs.Container();//新建容器,有和stage一样的方法
stage.addChild(gameView);//放入舞台


/*好处:可以同时移动*/
gameView.x = 100;
gameView.y = 100;

var c = new Childcontainer();
gameView.addChild(c);

stage.update();

使用先引入:

function Childcontainer(){
    var Rect = new createjs.Shape();
    Rect.graphics.beginFill("red");
    Rect.graphics.drawRect(0,0,50,50);
    Rect.graphics.endFill();//结束绘制
    var Text = new createjs.Text("m","30px Arial","blue");
    this.addChild(Rect);
    this.addChild(Text);
}

Childc

2.EaselJS绘图

    <canvas id="gameView" width="400px" height="400px" style="background-color: gray"></canvas>
    <script src="js.js"></script>

js.js

var stage = new createjs.Stage("gameView");
var gameView = new createjs.Container();
stage.addChild(gameView);

var Rect = new createjs.Shape();//想要绘制需创建图形对象
Rect.graphics.beginFill("blue");
Rect.graphics.drawRect(0,0,100,50);//drawRect绘制矩形,坐标0,0    宽100,高50
gameView.addChild(Rect);

var Ellipse = new createjs.Shape();
Ellipse.graphics.beginFill("yellow");
Ellipse.graphics.drawEllipse(100,100,100,50);//椭圆  坐标100,100    宽100,高50
gameView.addChild(Ellipse);



var c = new Circle();
c.setCircleType(Circle.TYPE_GREEN);
gameView.addChild(c);

stage.update();

head加入js:

function Circle() {
    createjs.Shape.call(this);
    this.setCircleType = function (type) {
        this._circleType = type;
        switch (type) {
            case
            Circle.TYPE_RED:
                this.setColor("red");
                break;
            case
            Circle.TYPE_GREEN:
                this.setColor("green");
                break;
        }
    };

    this.setColor = function (color) {
        this.graphics.beginFill(color);
        this.graphics.drawCircle(120, 220, 50);//圆
        this.graphics.endFill();
    }
    this.setCircleType(Circle.TYPE_RED);
}

Circle.prototype = new createjs.Shape();//指定图形入口
Circle.TYPE_RED = 1;
Circle.TYPE_GREEN = 2;

3.EaselJS事件

    <canvas id="gameView" width="400px" height="400px" style="background-color: pink"></canvas>
    <script src="js.js"></script>

var stage = new createjs.Stage("gameView");
var gameView = new createjs.Container();
stage.addChild(gameView);

var Rect = new createjs.Shape();
Rect.graphics.beginFill("red");
Rect.graphics.drawRect(0,0,100,100);

gameView.addChild(Rect);

stage.update();

Rect.addEventListener("click", function (e) {//单击事件
//    alert("点击了");
//    alert("X="+ e.localX+",Y="+ e.localY);//获得坐标
});

Rect.addEventListener("dblclick", function (e) {//双击事件
//    alert("双击了");
});
createjs.Ticker.setFPS(25);//动画速度
createjs.Ticker.addEventListener("tick",handlerTick);//ticker
var speedX = 10;
function handlerTick(){
    if(Rect.x<=0){//左边界
        speedX = Math.abs(speedX);
    }
    if(Rect.x >= 400-100){
        speedX = -Math.abs(speedX);
    }
    Rect.x += speedX;
    stage.update();
};

3.CreateJS控件

1.Text

需要:easeljs-0.7.1.min.js

<canvas id="gameView" width="600px" height="600px" style="background-color: pink"></canvas>
<script src="js.js"></script>

var canvas;
var stage;
var text;
var rect;
var count = 0;

/*canvas = document.getElementById("gameView");
stage = new createjs.Stage(canvas);*/
stage = new createjs.Stage("gameView");

text = new createjs.Text("我是文字内容..0","36px Arial","red");
text.x = 300;
text.y = 300;
/*text.rotation =20;//旋转20度*/
stage.addChild(text);

rect = new createjs.Shape();
rect.x = text.x;
rect.y = text.y;
/*rect.rotation = text.rotation;*/
stage.addChildAt(rect,0);//addChild无法添加子元素,会覆盖

createjs.Ticker.setFPS(6);
createjs.Ticker.addEventListener("tick",handlertick);

function handlertick(e){
    count++;
    text.text = "我是文字内容.."+count;

    rect.graphics.clear()//清除之前的,重绘图形
        .beginFill("blue").drawRect(-10,-10,text.getMeasuredWidth()+20,50);
    text.rotation = count;
    rect.rotation = text.rotation;
    stage.update();
}

2.BitMap

需要:easeljs-0.7.1.min.js

<canvas id="gameView" width="600px" height="600px" style="background-color: pink"></canvas>
<script src="js.js"></script>

var stage = new createjs.Stage("gameView");
var gameView  = new createjs.Container();
stage.addChild(gameView);

var bitmap = new createjs.Bitmap("8.png");
gameView.addChild(bitmap);

createjs.Ticker.setFPS(30);//一直刷新显示,效率低
createjs.Ticker.addEventListener("tick", function () {
    stage.update();
});

3.MovieClip

需要:easeljs-0.7.1.min.js,tweenjs-0.6.0.min.js,movieclip-0.7.1.min.js

<canvas id="gameView" width="600px" height="600px" style="background-color: pink"></canvas>
<script src="js.js"></script>

var stage = new createjs.Stage("gameView");
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", stage);//舞台刷新

var mc = new createjs.MovieClip(null, 0, true, {start: 50,stop:0})//渲染,启始位置,是否可循环,起始时间线
stage.addChild(mc);

var state1 = new createjs.Shape(new createjs.Graphics().beginFill("red").drawCircle(0, 100, 30));
var state2 = new createjs.Shape(new createjs.Graphics().beginFill("blue").drawCircle(0, 100, 30));

mc.timeline.addTween(
    createjs.Tween.get(state1).to({x: 0}).to({x: 400}, 100).to({x: 0}, 100)//时间线总100
);

mc.timeline.addTween(
    createjs.Tween.get(state2).to({x: 400}).to({x: 0}, 100).to({x: 400}, 100)
);

mc.gotoAndPlay("start");

4.Sprite

需要:easeljs-0.7.1.min.js

<canvas id="gameView" width="960px" height="400px" style="background-color: pink"></canvas>
<script src="js.js"></script>

var stage = new createjs.Stage("gameView");

var ss = new createjs.SpriteSheet({
   "images":["4.png"],
    "frames":{
        "height":100,//每份图片的高
        "width":100,//每份图片的宽
        "count":2//总共几张图
    },
    "animations":{
        "a":[0,1,"b"],//状态a的图是从号码*-*
        "b":[1,2,"a"]
    }
});

var s = new createjs.Sprite(ss,"a");
s.x=100;
s.y=100;

stage.addChild(s);
createjs.Ticker.setFPS(60);
createjs.Ticker.addEventListener("tick",stage);

5.DOMElement

需要:easeljs-0.7.1.min.js

<div id="div" style="background-color: aqua;width: 200px;height: 200px">
    <button id="btn" width="100px" height="50px" οnclick="alert(1)">按钮</button>
</div>
<canvas id="gameView" width="960px" height="400px"></canvas>
<script src="js.js"></script>

var stage = new createjs.Stage("gameView");
var container = new createjs.Container();

stage.addChild(container);
container.x = 100;
container.y = 100;

var content = new createjs.DOMElement("div");
container.addChild(content);
stage.update();