Code Monkey home page Code Monkey logo

sparkengineweb's Introduction

cov

Spark Engine Web

Alt text

Spark Engine Web is a lightweight browser-based web game engine we build for fun.

We are building the engine to be simple and fairly performant, and we want to provide the best possible experience to our engine's users and contributors.

That being said, it will be an iterative journey and we won't bump the major version until we feel confident we have reached our goal.

Getting Started

Requirements

  • Node ^20
  • NPM ^10

Run npm i to install packages. After that, you are good to go

Commands

Here you can find the list of commands. Commands with the :ci flag are reserved for the CI setup of the project and not recommended for normal use

  • npm test to run the unit test suite
  • npm run test:perf to run the performance test suite
  • npm run build to build the engine
  • npm run build:dev to build the engine in development mode
  • npm run build:docs to build the documentation directory
  • npm run clean to clean the dist folder
  • npm run serve:examples to serve examples in a local webserver, getting rid of annoying CORS issues and similar. Requires npm run build:*

Usage

Download the latest release here: https://github.com/RuggeroVisintin/SparkEngineWeb/releases/latest. Then npm i and npm build to install dependencies and build the .js distribution file.

You can now include it in your html page like so

<html>

<body>
    <canvas id="canvas" style="width: 100%; height: 100%"></canvas>
    <script type="text/javascript" src="./dist/spark-engine-web.js"></script>
    <script>
        const context = document.getElementById('canvas').getContext('2d');
        const engine = new SparkEngine.GameEngine({
            context,
            framerate: 30,
            resolution: { width: 1920, height: 1080 }
        });

        const scene = engine.createScene();
    </script>
</body>
</html>

See the available examples to find out more

Examples

You can add more examples in the examples folder. To correctly serve them, especially if you experience problems with CORS, see the npm run serve:examples command.

or just visit https://ruggerovisintin.github.io/SparkEngineWeb/examples for a ready-to-use version, updated to the latest release

Contributing

To contribute to the project just open a pull request. If you are working on an existing issue remember to link the pull request to it.

Once opened a core maintainer will review the PR and eventually approve it

License

See LICENSE file

Contact

See the maintainers section in package.json

sparkengineweb's People

Contributors

ruggerovisintin avatar dependabot[bot] avatar ruggero-visintin avatar github-actions[bot] avatar scrice994 avatar nunziozappulla avatar semantic-release-bot avatar

Stargazers

Leonardo Mattevi avatar Stoyan Georgiev avatar Nunzio avatar avatar Marco Bianco avatar

Watchers

avatar avatar

Forkers

cpfx0 nunzio92

sparkengineweb's Issues

BoundingBoxComponent - isContainer

AS A GameDev
I WANT TO Create a BoudingBoxComponent as a container
SO THAT I can contain limit movements of all physics object withing the container boundary

Benchmark setup

AS A GameDev
I WANT TO See some benchmark result
SO THAT I can monitor the general performance of the product

  • Rendering Benchmark
  • Physix Benchmark
  • Hierarchy Benchmark

Parent / Child Transform

AS A GameDev
I WANT TO Add a Transform Component as parent of another TransformComponent
SO THAT the twos move together

Benchmark CI Run

AS A GameDev
I Want to know the benchmark result of the software
So that I can choose if it suits my need

Debug Logging

AS A GameDev / EngineDeveloper
I WANT TO Enable the Debug Logger
SO THAT I can easily debug what the engine is doing when having issues

SemGrep Setup

AS A Core Maintainer
I WANT TO Add A Code Scanner to the CI suite
SO THAT I can automate security scans and start writing code quality rules

framerate agnostic Engine

AS A GAME Dev
I WANT Movements of the objects to be framerate agnostic
SO THAT when the framerate changes the world speed remains the same

It can implemented by keeping track of the delta time between the previous frame and the current frame and multiplying the velocity by the delta time. This way the velocity becomes independent of the engine framerate.

velocity = velocity * deltatime

  • Framerate agnostic position update
  • Framerate agnostic physx simulation

RigidBodyComponent

AS A Game Dev
I WANT TO attach a RigidBodyComponent to an Entity
SO THAT the entity can inherit some physical properties

Linked behaviors

When this type of component is implemented, the Physx Engine should be able to recognize components that need physical properties to be applied and components that need collision detection and avoid unnecessary math

RigidBodyProperties - MVP:

  • Friction - The friction generated by the surface of the rigidBody
  • Weight - The weight of the rigid Body

Scan Secrets

AS A Core Maintainer
I WANT TO add secret detection to the CI and Local setup
SO THAT I can avoid secret being pushed in the repository or catch them ASAP

Init Project

  • npm setup
  • #5
  • ts setup
  • jest setup
  • CI setup - GitHub Actions

InputSystem - Register Input Component

AS A GameDev
I WANT TO Register an InputComponent to the InputSystem
SO THAT It can receive input events

  • Register InputComponent to the System
  • Pass Input Events when triggered to the registered InputComponents

How to sync Audio with Renderer Speed?

We have to look into how to sync audio with the variable speed of the renderer.
This issue is to collect ideas and keep track of the discussion.

For example, if the render starts skipping frames, should we skip audio parts as well?

Sound System

AS A GameDev
I WANT TO register SoundComponents into the SoundSystem
SO THAT I can get them to be played

DynamicObjectEntity - track transform

AS A GameDev
I WANT TO create an object that dynamically updates
SO THAT I don't have to do it myself

additional notes

It should automatically set the bounding box to track the parent transform

RenderSystem - Implement Update method

Scenario: Render registered components
GIVEN I registered some renderable components into the RenderSystem
WHEN the RenderSystem.update() method is invoked
THEN I expect them to be rendered through the given Renderer

StaticObjectEntity

AS A GameDev
I WANT TO create a static object entity
SO THAT I can track collision knowing the entity will never change position

HierarchySystem

AS A GameDev
I WANT TO push transform components to a hierarchy system
SO THAT they can get updated in the main game loop

Sound Component

AS A GameDev
I WANT TO Create a Sound Component
SO THAT I can define some sound properties

Add ESLint

Add Eslint with basic configuration to the project setup

TransformComponent - velocity

AS A GameDev
I WANT TO define a transform component velocity
SO THAT it influences how the component moves through space

Serve Examples

AS A GameDev
I WANT TO serve the examples
SO THAT I Can navigate them

Renderer - Resolution Indipendent Rendering

AS A GameDev
I WANT the coordinates of my game to be agnostic from the rendering resolution
SO THAT I don't have to update the coordinates every time the resolution changes

MaterialComponent - diffuseColor

AS A GameDev
I WANT TO define a materialComponent with a diffuseColor
SO THAT I can render entities with different diffuse colors

Sfx Asset Loader

AS A Game Dev
I WANT TO Load an Sfx Asset (sound effect asset)
SO THAT I can play it when needed

ECS - TriggerEntity

AS A GameDev
I WANT TO Create an Entity that is Triggered when a collision happens with a certain other component
SO THAT I can attach further logic to the event

InputComponent

AS A GameDev
I WANT TO attach an Input Component to an existing entity
SO THAT I can process inputs and update the entity accordingly

MaterialComponent - opacity

AS A GameDev
I WANT TO define the opacity of a MaterialComponent
SO THAT I can define different degrees of transparency

Acceptance Criteria

Scenario: Draw a Transparent object in front of an opaque object
GIVEN I have an existing object in the background
AND I draw a transparent object in the foreground
THEN I see the background object to be visible proportionally to the transparency of the foreground object

Subtasks

  • SetBlendingMethodRenderCommand
  • Add opacity material property (fully transparent 0 - 100 Opaque)

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.