Example/template project with typescript

[Ciberus]

Recently i knewed about playcanvas. Didn’t found any template that fit my needs and decided to setup project myself - small FPS game, during development I found solutions and approaches on how its possible to write code for playcanvas and wants to share project with them combined. Hope it will helps newcomers as I am to make first project without hours of setup.

Github - GitHub - Ciberusps/playcanvas-typescript-example
Project - PlayCanvas 3D HTML5 Game Engine
Build - Typescript example - PLAYCANVAS

Features

• typescript
• eslint
• prettier
• webpack
• classes and attributes using decorators
• single js bundle
• playcanvas-sync

Highlights/Approaches

• small and clear classes creation and attributes declaration using decorators
  

• consts map for “lifecycleMethods” to lower chance of typo errors
  

  

• communication events aka “event bus” aka this.app("eventName") also typesafe, there were many ways how to do it but i stopped on simple consts map with event names and typings for “event objects” for transferring data - example TPlayerScoreChangedEvent on screenshot
  

  

• webpack bundles all scripts in single file

• “hot reload” - start project via npm run dev, webpack and playcanvas-sync will start in “watch mode” every time u change any script all changes immediatly bulids and syncs, so u will only need to refresh page with launched game
  

  

• eslint, prettier, typescript settuped and u can use
  npm run typecheck
npm run prettier:check
npm run lint
  in your CI/CD, also I added github action that makes build and “push all” scripts to current branch every time when u push commit

• DebugSystem(window.debugSystem) can be used to debug scripts independantly by creation of categories for example u want to test some functionality of character to enable this category just open dev console(F12) and write window.debugSystem.enableCategory("character")
  

  
  
  in code u can check that debug category is enabled and send some debug information
  

What can be improved

• probably classes inheritance broken
• jest setup for unit tests

Not sure that some of approaches scales well in big projects or in network-based games, if u have thoughts on how to improve this example project pls leave feedback and probably if many people will be interested i can go further and make small network based FPS/TPS game to test that all things scales well.

[vmwxiong]

Very cool! Just wanted to make sure you were aware of the official Typescript template as well: GitHub - playcanvas/playcanvas-editor-ts-template: A simple TypeScript template for PlayCanvas that can also sync with your playcanvas.com project

Might even want to take some of your stuff and PR those features in?

[sooyong_Kim]

can you test the template with the orbit camera script?

[will]

@sooyong_Kim The official one? Is there a bug?

[sooyong_Kim]

@will I converted the official orbitCamera script into a typescript version with decorators used by this template.

After then, the bundling with webpack works okay. But somehow, pivotPoint property is undefined when I actually runs on the launch mode.

[sooyong_Kim]

@Ciberus I’ve created a sample project.

GitHub - figo2264/pc_ts_orbit_camera

Can you kindly take a look at it?

I’ve converted orbitCamera and mouseInput script as TS.

[gilfmuxa]

Hey everyone

Apologies for reviving an old thread, but I’ve updated the script, and it might be helpful for some of you.

I’ve tested it in various projects and everything works great.

You can check out the forked repository here: GitHub - sidelamp/pc-typescript-example

Hope this helps!