搭建phaser的typescript模版

sanyang 发布于2019-08-26 13:48 / 2689人阅读

摘要：官方提供了一个使用了模版的项目，地址该项目已经使用了和，在此基础上，我们加入。安装和在的配置中增加文件的在增加文件，该文件也是官方提供的。在根目录下新建，然后修改文件即可按找如下方式加载图片一个加入了的模版的地址

phaser官方提供了一个使用了webpack模版的项目，github地址,该项目已经使用了babel和webpack，在此基础上，我们加入typescript。

安装typescript和ts-loader：

npm install typescript --save-dev
npm install ts-loader --save-dev

在webpack/base.js的配置中增加.ts文件的loader：

{
  test: /.ts$/,
  exclude: /node_modules/,
  use: [
    {
      loader: "babel-loader"
    },
    {
      loader: "ts-loader"
    },
  ]
},

在src/增加phaser.d.ts文件，该文件也是官方提供的。

根目录下添加tsconfig.json文件，一个参考配置如下

{
  "compilerOptions": {
    "target": "ES2016",
    "module": "CommonJS",
    "sourceMap": true,
    "noImplicitAny": false,
    "strict": false
  },
  "include": [
    "src/*"
  ]
}

此时可以在src/下进行ts文件的开发，但是比如加载图片还是有问题，会提示找不到module，为此，将图片声明为module。

在根目录下新建index.d.ts，

 declare module "*.png" {
   const content: string;
   export default content;
}

然后修改tsconfig.json文件

 {
   "compilerOptions": {
   "target": "ES2016",
   "module": "CommonJS",
   "sourceMap": true,
   "noImplicitAny": false,
   "strict": false
 },
   "include": [
     "src/*", 
     "index.d.ts",  
   ]
 }

即可按找如下方式加载图片：

import * as logo from "../assets/down.png";

一个加入了typescript的phaser模版的github地址

超融合服务器混合云 asp搭建网站模版 Phaser TypeScript typescript javascript

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109579.html

vscode中使用typescript开发Phaser游戏

摘要：要想做到提示，就必须用到强类型的，使用方法安装在项目根目录新建文件夹，里面放置如下文件在根目录新建文件完成以上步骤，就已经支持的提示了想要查看在下的写法，请移步，里面有详细的配置和踩星星入门游戏的实现使用背景在上一篇（在vscode中增加phaser代码提示）中，我们可以做到代码提示了，但是有个比较严重的问题，就是我们通过API创建的对象还是不能提示，因为js为弱类型，通过var ...

MobService 2019-08-20 17:47 评论0 收藏0
从零到一：用Phaser.js写意地开发小游戏（Chapter 1 - 认识Phaser.js）

摘要：由于公司项目转型，需要创造一个小游戏平台，需要使用一个比较成熟的前端游戏框架来快速开发小游戏。仅支持开发游戏，因为专注，所以高效。早在年的光棍节前一天晚上，这个游戏就诞生了。原型是一个之前很火的非常魔性的小游戏，叫寻找程序员。 showImg(https://segmentfault.com/img/bVMGY5?w=900&h=500); 写在前面实际上我从未想过我会接触到H5小游...

Ashin 2019-08-05 11:10 评论0 收藏0
从零到一：用Phaser.js写意地开发小游戏（Chapter 1 - 认识Phaser.js）

摘要：由于公司项目转型，需要创造一个小游戏平台，需要使用一个比较成熟的前端游戏框架来快速开发小游戏。仅支持开发游戏，因为专注，所以高效。早在年的光棍节前一天晚上，这个游戏就诞生了。原型是一个之前很火的非常魔性的小游戏，叫寻找程序员。 showImg(https://segmentfault.com/img/bVMGY5?w=900&h=500); 写在前面实际上我从未想过我会接触到H5小游...

didikee 2019-08-20 16:05 评论0 收藏0
SegmentFault 技术周刊 Vol.24 - “游戏” 已启动：Are you ready?

摘要：仅支持开发游戏，因为专注，所以高效。游戏相关的一些概念画布一般来说，做游戏的话基于会比基于性能要好很多，尤其是涉及大量动画的情况下。游戏即将开始这一节我们来完成游戏最核心的场景。我们首先布置了游戏场景，加入了背景音乐。 showImg(https://segmentfault.com/img/bVOxvd?w=900&h=385); 今天是六一国际儿童节，祝小伙伴们六一快乐！本期技术周...

dockerclub 2019-08-05 11:19 评论0 收藏0
TypeScript在react项目中的实践

摘要：前段时间有写过一个在项目中的实践。在里边有解释了为什么要使用，以及在中的一个项目结构是怎样的。关于的配置文件，在本项目中存在两份。一个需要注意的小细节因为我们的与实现版本中都用到了。前段时间有写过一个TypeScript在node项目中的实践。在里边有解释了为什么要使用TS，以及在Node中的一个项目结构是怎样的。但是那仅仅是一个纯接口项目，碰巧赶上近期的另一个项目重构也由我...

Hwg 2019-08-23 11:31 评论0 收藏0