Git Product home page Git Product logo

sketchbase's Introduction

SketchBase (Demo)

A tiny game engine for the browser.

Development

  • Install yarn and git
  • yarn install to download necessary dependencies
  • yarn start and then visit http://localhost:8080
  • yarn build to compile a production bundle (and see the bundle size)
  • yarn deploy to deploy directly to github pages

Features

Hotloading

Make changes to the typescript code, see it reflected instantly (well, < 1 second) in the browser, without losing the game state. Most of the heavy lifting is done by Webpack's Hot Module Replacement feature. On the game side, the Meta system takes place of registering class constructors so that their prototypes can be patched when new code is hotloaded. Any class that is meta registered is hotloadable. Essentially: all objects remain untouched, but their prototypes point to the functions defined in the hotloaded code.

DebugMenu

dat.GUI is used to provide a handy menu that's usable on both mobile and desktop. Modules can add categories and tweaks using `DebugMenu.addFolder(...)` and `DebugMenu.add(...)`. Bools, floats, ints, and colors are all acceptable types. `DebugMenu.add(...).onChanged( callback )` can be used to perform extra actions on change.

Profiling

In addition to the Chrome profiler, there is also a "Profile HUD" which displays instrumented timings in real-time. This is very useful in combination with hotloading, as you can see the performance impact of a code change immediately. It also makes it easy to see quick profiling data when DevTools aren't easily available, such as on mobile. By default, all module functions are instrumented (e.g. `Compositor::Update()`). To add finer timings, wrap code in `Profile.begin( entryName )` and `Profile.end( entryName)` calls.

All instrumented sections also appear in Chrome's Performance tab in the "User Timings" section.

License

TODO

sketchbase's People

Contributors

themikelester avatar

Watchers

 avatar James Cloos avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.