No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.vscode
chrome-extension
src
style-old
style
.babelrc
.gitignore
.prettierrc.js
README.md
TODO.md
package-lock.json
package.json
tsconfig.json
webpack.config.js

README.md

pearl-inspect

A Chrome DevTools extension for inspecting games made with the Pearl framework.

Features

  • List entities currently in the game world
  • Inspect the properties of components as they update
  • Change the properties of components
  • Play/pause the game loop
  • Step through the game loop

Installing

To install:

git clone git@github.com:thomasboyt/pearl-inspect.git
cd pearl-inspect/
npm install && npm run build

Then load the chrome-extension folder as an unpacked extension (see this guide).

If it worked, you should see a "Pearl" tab in your developer tools when you next open them.

Usage

There are two modifications you'll need to do to your Coquette apps to make them work.

Exposing the Pearl instance

The most important one is that you expose the Pearl instance in your game as window.__pearl__, e.g.:

window.__pearl__ = createPearl({/* ... */})

Without this, the inspector won't be able to find your Coquette instance.

Entity display names

When creating GameObjects, create them with a name property to ensure a name is displayed:

const playerObj = new GameObject({
  name: 'player',
  components: [new Player()],
  /*...*/
});