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]