createjs游戏引擎的简单介绍

发布时间：2023-12-08

createjs游戏引擎的简单介绍

更新：2022-11-11 14:41

本文目录一览：

  1. 如何使用Createjs来编写HTML5游戏EaselJS简介
  2. 如何使用Createjs来编写HTML5游戏PreloadJS和SoundJS
  3. 哪个h5游戏引擎目前最受欢迎？

如何使用Createjs来编写HTML5游戏EaselJS简介

createJs的由来，基础什么的就不说了，就直接说createJs的用法吧。 首先到createJs官网下载，createJs分成easelJs（图形动画）、preloadJs（文件加载）、soundJs（音频控制）以及tweenJs（补间动画）四部分，大家下载的时候，建议下载两个文件，一个是压缩版文件，用于项目中的引用，再下载个源码文件，用于查看用法、API、demo等。因为楼主目前只用了easelJs和preloadJs，所以暂时就只说这两个，其实就这两个已经非常够用了。 接下来开始分析代码： 首先引入js文件

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

然后进行舞台初始化操作：

function init() {
    stage = new createjs.Stage("cas");
    C_W = stage.canvas.width;
    C_H = stage.canvas.height;
    var manifest = [
        {src: "image/man.png", id: "man"},
        {src: "image/ground.png", id: "ground"},
        {src: "image/bg.png", id: "bg"},
        {src: "image/high.jpg", id: "high"},
        {src: "image/coins.png", id: "coin"}
    ];
    loader = new createjs.LoadQueue(false);
    loader.addEventListener("complete", handleComplete);
    loader.loadManifest(manifest);
    drawLoading();
}

上面就用到了preloadJs中的方法，实例化一个loader，把需要加载的图片文件放在manifest里面，进行加载，加载完成后调用回调handleCompelete函数：

function handleComplete() {
    //当图片素材load完后执行该方法
    var manImage = loader.getResult("man"),
        lowground = loader.getResult("ground"),
        highground = loader.getResult("high"),
        bgImage = loader.getResult("bg"),
        coins = loader.getResult("coin");
    sky = new createjs.Shape();
    sky.graphics.bf(bgImage).drawRect(0, 0, C_W, C_H);
    sky.setTransform(0, 0, 1, C_H / bgImage.height);
    stage.addChild(sky);
    man = createMan(200, 326, manImage);
    //该框为判定角色的判定区域
    kuang = new createjs.Shape();
    kuang.graphics.beginStroke("rgba(255,0,0,0.5)").drawRect(0, 0, man.size().w, man.picsize().h * 1.5);
    //stage.addChild(kuang);
    mapHandle(lowground, highground, coins);
    createjs.Ticker.timingMode = createjs.Ticker.RAF; //设置循环方法，可以是requestAnimationFrame或者是setTimeout
    createjs.Ticker.setFPS(30); //舞台帧率控制
    createjs.Ticker.addEventListener("tick", tick); //绑定舞台每一帧的逻辑发生函数
    window.addEventListener("keydown", function (event) {
        event = event || window.event;
        if (event.keyCode === 32 && man.jumpNum < man.jumpMax) {
            man.jump();
        }
    });
}

获得加载完成后端的图片数据就直接用loader.getResult就可以获取了，跑酷游戏需要一个背景，所以，我们实例化一个sky，然后进行位图绘制，bf方法是beginBitmapFill的缩写，该方法就是开始绘制位图，后面的drawRect是位图的绘制区域，区域当然是整个画布啦，所以就是drawRect(0,0,C_W,C_H)。实例化出来sky后就直接添加到舞台stage里面就行了。接下来是实例化一个角色，createMan方法后面有说，是自己封装的。 然后进行舞台循环设置，上面有注释了，就不说了。

如何使用Createjs来编写HTML5游戏PreloadJS和SoundJS

CreateJS最后两个部分，PreloadJS用来加载并统一管理你游戏中用到资源，图片，json文件等等，而SoundJS用来播放声音，两者的用法都非常的简单而且固定。 首先是SoundJS，顾名思义播放声音，使用时只需要先

createjs.Sound.registerSound("assets/sound.mp3", "soundname");

使用时调用：

createjs.Sound.play("soundname");

最后是PreloadJS，使用PreloadJS导入文件首先建立一个LoadQueue，然后即可使用它来载入单个文件，或者载入一个文件列表

var queue = new createjs.LoadQueue(false); //本地开发使用false即可
queue.installPlugin(createjs.Sound); //如果载入声音，必须先注册createjs.Sound
queue.on("complete", handleComplete, this); //载入完成后调用
queue.loadFile({id: "sound", src: "sound.mp3"}); //载入单个文件
//载入一个文件列表
queue.loadManifest([
    {id: "myImage1", src: "Image1.jpg"},
    {id: "myImage2", src: "Image2.jpg"},
    {id: "myImage3", src: "Image3.jpg"},
    {id: "myImage4", src: "Image4.jpg"}
]);

function handleComplete() {
    createjs.Sound.play("sound");
    var image = queue.getResult("myImage1");
    var bitmap = new createjs.Bitmap(image);
}

你可以把游戏中用到的所有资源，先编辑到一个manifest列表当中，可以是图片，json，css，js等等，最后使用loadManifest(manifest)导入。

哪个h5游戏引擎目前最受欢迎？

之前咨询过TOM游戏的客服！大致是这样的： 目前使用最广泛的引擎是egret、cocos，createjs，jawjs等等。

推荐文章