搭建phaser的typescript模版

sanyang 發布于2019-08-26 13:48 / 2793人閱讀

摘要：官方提供了一個使用了模版的項目，地址該項目已經使用了和，在此基礎上，我們加入。安裝和在的配置中增加文件的在增加文件，該文件也是官方提供的。在根目錄下新建，然后修改文件即可按找如下方式加載圖片一個加入了的模版的地址

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地址

云服務器 GPU云服務器 asp搭建網站模版 Phaser TypeScript typescript javascript

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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小游...

didikee 2019-08-20 16:05 評論0 收藏0
TypeScript在react項目中的實踐

摘要：前段時間有寫過一個在項目中的實踐。在里邊有解釋了為什么要使用，以及在中的一個項目結構是怎樣的。關于的配置文件，在本項目中存在兩份。一個需要注意的小細節因為我們的與實現版本中都用到了。前段時間有寫過一個TypeScript在node項目中的實踐。在里邊有解釋了為什么要使用TS，以及在Node中的一個項目結構是怎樣的。但是那僅僅是一個純接口項目，碰巧趕上近期的另一個項目重構也由我...

Hwg 2019-08-23 11:31 評論0 收藏0