state driven game template

？ショ和状態駆動型ゲーム開発スターター

キックするためのテンプレートリポジトリは、Webで最新のゲーム開発を開始します。

---

• クイックスタート
• 概要
• プロジェクト構造
• ゲームの状態
• スプライト
• プロジェクトの例

---

クイックスタート

？前提条件

• 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]