Melon Solid

This project fuses the awesome frameworks Melon.js (for game development) and Solid.js (for making websites). By combining them together you can get the convience of HTML syntax while developing games using Melon.js

When using plain Melon.js we write our games like this (from the platformer example):

function onload() {
    if (!me.video.init(800, 600, {
      parent: 'screen',
      scaleMethod: 'flex-width',
      renderer: me.video.AUTO,
      preferWebGL1: false,
      subPixel: false
    })) {
        alert('Your browser does not support HTML5 canvas.')
        return
    }
    
    me.audio.init('mp3,ogg')
    me.loader.preload(resources, () => {
        me.state.set(me.state.PLAY, new PlayScreen())
        me.state.transition('fade', '#FFFFFF', 250)
        me.pool.register('mainPlayer', PlayerEntity)
        me.pool.register('SlimeEntity', SlimeEnemyEntity)
        me.pool.register('FlyEntity', FlyEnemyEntity)
        me.pool.register('CoinEntity', CoinEntity, true)
    }
    me.state.change(me.state.PLAY)
}

Now making games is as easy as writing HTML:

function App(){
    <Melon audio>
        <Preloader callback={()=>{
            me.state.transition('fade', '#FFFFFF', 250)
            game.texture = new me.TextureAtlas(me.loader.getJSON('texture'), me.loader.getImage('texture'))
        }} resources={resources} autoPlay>
            <Stage state={me.state.PLAY} stage={new PlayScreen()}/>
            <Entity name="FlyEntity" class={FlyEnemyEntity}/>
            <Entity name="SlimeEntity" class={SlimeEnemyEntity}/>
            <Entity name="CoinEntity" class={CoinEntity}/>
            <Entity name="mainPlayer" class={PlayerEntity}/>
        </Preloader>
    </Melon>
}

Plus, if we want to add some HTML to serve as our GUI, we can simple put it directly inside our Melon game!

Examples

Want to see a few examples? I've implemented the Whack-a-Mole and Platformer games (taken from Melon.js) Look in the examples folder

Trying to make a game engine apparently.

Clockwork - a game engine from scratch The goal of this project is to build a game engine, I still don't know what it needs to do, but will update thi

Oct 31, 2021

An ASCII (technically PETSCII :)) "Game Engine" for JavaScript

Announcement! I'm putting this project on hold, because I remembered how much I hate JavaScript. (Please don't take offense, it's just my preference.)

Nov 12, 2022

The 2D Game Engine written on JavaScript.

CherryEngine The 2D Game Engine written in JavaScript. NEW UPDATE Version 1.2 Added: TypeObjectError.js Changed: static methods are not static now, yo

Oct 26, 2022

Attempt #2 at creating a game engine with Sciter.

JogoMaker Attempt #2 at creating a game engine with Sciter, with love and care. For Attempt #1, see this project, which was hastily thrown together as

Sep 5, 2022

2D HTML5 rendering and layout engine for game development

Stage.js is a 2D HTML5 JavaScript library for cross-platform game development, it is lightweight, fast and open-source. Check out examples and demos!

Jan 3, 2023

HTML5 Game Engine

Quintus Engine Quintus is an easy-to-learn, fun-to-use HTML5 game engine for mobile, desktop and beyond! The Quintus engine is an HTML5 game engine de

Dec 21, 2022

a discord-based monster catching game engine, used for Lozpekamon on our Discord server

discord-monster-catching-game a discord-based monster catching game engine, used for Lozpekamon on our Discord server How to Use Requirements install

Oct 30, 2022

Generate meshes from signed distance functions and constructive solid geometry operations.

sdf-csg Generate meshes from signed distance functions and constructive solid geometry operations. This library is heavily based upon Inigo Quilez's 3

Oct 24, 2022

Solid.js library adding a services layer for global shared state.

Solid Services Services are "global" objects useful for features that require shared state or persistent connections. Example uses of services might i

Dec 30, 2022

Comments

Create a compiler extension to convert .TMX to JSON automatically

It would be awesome to have native .TMX imports that get convert to .JSON automatically. We could also use this to strip all unused sprites from the spritesheets.

opened by L1lith 0
Improve Isomorphic Support

This is a Melon.js limitation. When you import melonjs in Node it immediately throws an error because it can't access the window before you even call anything at all.

More Here: https://github.com/melonjs/melonJS/issues/1092

opened by L1lith 1