state driven game template

? ️ Starter de développement de jeu motivé par l'état

Un référentiel de modèles pour lancer le développement de jeux moderne sur le Web.

---

• Démarrage rapide
• Aperçu
• Structure du projet
• Game States
• Sprites
• Exemples de projets

---

Démarrage rapide

? Condition préalable

• node > = 14
• npm > = 6

Développement local

Installez les dépendances.

npm i

Démarrez le serveur de développement.

npm run start

Voir votre jeu en ouvrant votre navigateur à localhost:5000 .

Les modifications apportées aux fichiers source déclencheront une recompilation. Actualisez le navigateur pour voir les modifications.

Bâtiment

Construire le projet.

npm run build

La sortie sera située à /dist .

---

Structure du projet

 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]

? Game States

Les états de jeu fournissent une fonctionnalité cadre par trame pour votre jeu.

Créer des États

 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!' ) ;
  }
}

Utilisation des États

Pour faire passer votre jeu vers l'état suivant, push simplement une instance de votre état vers la pile de jeux.

 import { push } from '@core' ;

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

Les États peuvent également être sautés à partir de la pile tant qu'il a des États pour pop .

 import { pop } from '@core' ;

// Remove top-most state
pop ( ) ; 

? Sprites

Les sprites sont des objets qui rendent une image sur un HTMLCanvasContext2D .

Un sprite peut être créé de la manière suivante.

 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 ,
} ) ;

Le sprite peut être rendu dans un contexte de toile.

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

Facultativement, le sprite peut être mis à l'échelle dans les deux sens.

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

Draps de sprite

Une SpriteSheet est utilisée pour définir plusieurs objets Sprite à partir d'une seule image.

Une SpriteSheet est définie comme suit.

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

Définissez directement les sprites sur la feuille de sprite pour construire plusieurs sprites à partir de la même image.

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

Les sprites peuvent ensuite être récupérés de la feuille de sprite.

 /**
 * 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' ) ; 

Exemples de projets

• tic-tac-toe - [github]