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;半径50stage.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"];//确定播放mp3createjs.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的idvar Rect = new createjs.Shape();//创建可绘制的图形Rect.graphics.beginFill("red");//颜色  graphics:绘图Rect.graphics.drawRect(5,5,50,50);//四个方向stage.addChild(Rect);//添加子视图//舞台操作,一般不用,用containerstage.alpha = 0.5;//舞台半透明stage.x = 100;//x向右100,初始左上角stage.y = 100;//y向下100stage.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,高50gameView.addChild(Rect);var Ellipse = new createjs.Shape();Ellipse.graphics.beginFill("yellow");Ellipse.graphics.drawEllipse(100,100,100,50);//椭圆  坐标100,100    宽100,高50gameView.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);//tickervar 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" onclick="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();