state driven game template

？ ️國家驅動的遊戲開發起動器

一個模板存儲庫來啟動網絡上的現代遊戲開發。

---

• 快速開始
• 概述
• 項目結構
• 遊戲狀態
• 精靈
• 示例項目

---

快速開始

？先決條件

• node > = 14
• npm > = 6

地方發展

安裝依賴項。

npm i

啟動開發服務器。

npm run start

通過在localhost:5000來查看您的遊戲。

對源文件進行的更改將觸發重新編譯。刷新瀏覽器以查看更改。

建築

建立項目。

npm run build

輸出將位於/dist 。

---

項目結構

 dist                          [Build output]
src                           [Source root]
  /assets                     [Web assets]
  /icons                      [Web icons]
  /lib                        [Game libraries]
    /core                     [Core libraries - @core]
    /models                   [Game models - @models]
    /sprites                  [Sprite definitions - @sprites]
    /state                    [State definitions - @state]
    /utils                    [Utility libraries - @utils]
    /game.ts                  [Game entry point - @game]
  /index.html                 [Web index page]
  /main.ts                    [App entry point]
  /manifest.webmanifest       [PWA manifest]
  /service-worker.js          [PWA service worker]
dev-server.js                 [Development express server]
tsconfig.json                 [TypeScript configuration]
tslint.json                   [tslint configuration]
webpack.config.js             [Webpack configuration]

？遊戲狀態

遊戲狀態為您的遊戲提供框架功能。

創建狀態

 import { OnEnter , OnExit , OnRender , OnUpdate } from '@core' ;

export class MyGameState implements OnEnter , OnExit , OnRender , OnUpdate {
  enter ( ) : void {
    console . log ( 'Pushed to the stack!' ) ;
  }

  exit ( ) : void {
    console . log ( 'Popped from the stack!' ) ;
  }

  render ( ctx : CanvasRenderingContext2D ) : void {
    console . log ( 'Rendering frame!' ) ;
  }

  update ( { time , delta } ) : void {
    console . log ( 'Updating frame!' ) ;
  }
}

使用狀態

要將您的遊戲推向下一個狀態，只需push您的狀態實例推向遊戲堆棧即可。

 import { push } from '@core' ;

// Push a new state to the stack
push ( new MyGameState ( ) ) ;

只要州有pop狀態，狀態也就可以從堆棧中彈出。

 import { pop } from '@core' ;

// Remove top-most state
pop ( ) ; 

？精靈

精靈是在HTMLCanvasContext2D上呈現圖像的對象。

可以通過以下方式創建精靈。

 import { Sprite } from '@core' ;

// Create and load the image to be rendered.
const image = new Image ( ) ;
image . src = 'path/to/image.png' ;

// Create a sprite using the image and parameters.
const sprite = new Sprite ( image , {
  // Source width
  w : 16 ,
  // Source height
  h : 16 ,
  // Origin x position
  ox : 0 ,
  // Origin y position
  oy : 0 ,
} ) ;

可以將精靈渲染到畫布上下文。

 sprite . render ( ctx , {
  // Rendering x position
  x : 100 ,
  // Rendering y position
  y : 50 ,
} ) ;

可選地，可以將精靈縮放在兩個方向上。

 sprite . render ( ctx , {
  x : 100 ,
  y : 50 ,
  // Scale the sprite by 3
  scaleX : 3 ,
  scaleY : 3 ,
} ) ;

精靈床單

SpriteSheet用於從單個圖像定義多個Sprite對象。

SpriteSheet定義如下。

 const sprites = new SpriteSheet ( '/path/to/image.png' ) ;

直接在精靈片上定義精靈，以從同一圖像中構建多個精靈。

 sprites
  . define ( 'idle_1' , { w : 16 , h : 16 , ox : 0 , oy : 0 } )
  . define ( 'idle_2' , { w : 16 , h : 16 , ox : 16 , oy : 16 } ) ;

然後可以從精靈片中檢索精靈。

 /**
 * Note that, the `.get` method can return undefined.
 * Accommodate for this by optionally calling render
 * when doing so.
 *
 * `sprite?.render(ctx, config)`
 * */
const sprite = sprites . get ( 'idle_1' ) ; 

示例項目

• tic-tac-toe- [github]