create.js 开发小游戏(一)搭建项目

Fork Me On Github
zodream 游戏 TypeScript 2020年05月

本文使用 typescript 开发

环境准备

node

安装一些依赖

  
npm i @types/createjs createjs --save
npm i gulp gulp-concat gulp-typescript typescript --save-dev
12

增加文件 tsconfig.json ts 的编译配置信息

json
                           
{
    "compilerOptions": {
        "baseUrl": "./",
        "target": "es5",
        "strictNullChecks": true,
        "noImplicitAny": true,
        "allowJs": false,
        "experimentalDecorators": true,
        "noImplicitThis": true,
        "noImplicitReturns": true,
        "alwaysStrict": true,
        "noFallthroughCasesInSwitch": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "strict": true,
        "removeComments": true,
        "pretty": true,
        "strictPropertyInitialization": true,
    },
    "include": [
        "src/**/*.ts"
    ],
    "exclude": [
        "node_modules",
        "dist",
    ]
}
123456789101112131415161718192021222324252627

gulpfile.js gulp 编译方式

js
                  
var gulp = require('gulp'),
    ts = require('gulp-typescript'),
    concat = require('gulp-concat'),
    tsProject = ts.createProject('tsconfig.json');

gulp.task('copy', async() => {
    // 复制 createjs 到目标文件夹
    await gulp.src('node_modules/createjs/builds/1.0.0/createjs.min.js')
        .pipe(gulp.dest('dist/'));
});

gulp.task('default', gulp.series('copy', async() => {
    // 合并ts 文件并编译
    await gulp.src(['src/core/*.ts', 'src/scene/*.ts', 'src/*.ts'])
        .pipe(concat('zodream.ts'))
        .pipe(tsProject())
        .pipe(gulp.dest('dist/'));
}));
123456789101112131415161718

开始

新增 src 文件夹 里面放 主控制

新建 src/core 文件夹 里面放基本定义

新建 src/scene 文件夹 里面放每一个场景

具体代码示例查看 示例

主要代码

初始化场景

ts
 
let stage = new createjs.Stage(arg: string | HTMLCanvasElement);
1

设置启用触摸

ts
 
createjs.Touch.enable(stage);
1

设置场景的尺寸

ts
  
(<HTMLCanvasElement>stage.canvas).width = width;
(<HTMLCanvasElement>stage.canvas).height = height;
12

设置场景刷新频率

ts
  
createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;
createjs.Ticker.framerate = 60;
12

清空场景,更换场景时使用

ts
 
stage.removeAllChildren();
1

添加物体

ts
 
stage.addChild(...arg);
1

刷新生效

ts
   
createjs.Ticker.addEventListener('tick', function() {
    stage.update();
});
123

运行

新增 index.html

html
                       
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Catch Cat</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <style>
            body {
                margin: 0;
                padding: 0;
            }
        </style>
    </head>
    <body>
        <canvas id="stage" height="600" width="600"></canvas>

        <script src="dist/createjs.min.js"></script>
        <script src="dist/zodream.js"></script>
        <script>
            App.main('stage');
        </script>
    </body>
</html>
1234567891011121314151617181920212223

打开 index.html

有的浏览器直接打开文件无法加载资源文件,请使用其他程序,例如 iis,

node
 
npm i static-server
1

server.js

js
         
var StaticServer = require('static-server');
var server = new StaticServer({
    rootPath: '.',            // required, the root of the server file tree
    port: 8081,               // required, the port to listen
});

server.start(function () {
    console.log('Server listening to', server.port);
});
123456789

启动

 
node server.js
1

打开 http://localhost:8081 即可查看效果

点击查看全文
标签: createjs
0 367 0
Tween._inited does not reset if scene is being destroyed or removed inside the game and rebuild