HTML5 Game Engine

Last update: Dec 21, 2022

Related tags

Overview

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 designed to be modular and lightweight, with a concise JavaScript-friendly syntax. In lieu of trying to shoehorn a standard OOP-game engine structure into an HTML5 JavaScript engine, Quintus takes some cues from jQuery and provides plugins, events and a selector syntax. Instead of a deep single-inheritance-only model, Quintus provides a flexible component model in addition to traditional inheritance to make it easier to reuse functionality and share it across games and objects.

Warning: Quintus is at a very early stage of development, use at your own risk.*

Example Annotated Source

More details and documentation at HTML5Quintus.com

Read the Quintus Guide to get started on the Engine.

Online Forum / Community

For general questions, demos, etc please post to the Quintus HTML5 Game Engine G+ Community

Using Quintus

The easiest way to use Quintus is simply to use the CDN hosted version at:

<!-- Production minified ~20k gzipped -->
<script src='http://cdn.html5quintus.com/v0.2.0/quintus-all.min.js'></script>

<!-- Full Source ~40k gzipped -->
<script src='http://cdn.html5quintus.com/v0.2.0/quintus-all.js'></script>

Quintus has no dependencies.

Alternatively you can clone the repo and either use each file separately or generate a unified version:

$ git clone git://github.com/cykod/Quintus.git
$ cd Quintus
$ npm install
$ grunt

Check the dist/ directory for contatenated versions.

History of Quintus

The initial version of Quintus was built over the course of writing Professional HTML5 Mobile Game Development, although the repo code has diverged a bit from the Engine built in the book, the main philosophy and technologies used have not changed, and reading the book will give you a fairly exhaustive understanding of the internals of the Quintus Engine.

ToDo

Quintus is a young engine that has a lot of missing gaps - some of which are pretty straightforward to fill in. If you are interested in hacking on Quintus, shoot me an email pascal at cykod period com, I'm happy to help folks get hacking on the engine.

If you have suggestions for additional enhancements, please add them to the Issues queue - no guarantee all ideas will be implemented and integrated into the core of the system, but suggestions welcome.

Here's some specific pieces that need some love:

Update the Q.Scenes method to only render sprites that are visible in the grid. (so draw doesn't get called with thousands of sprites)
Fix the collision methods to calculate a collision magnitude based on dot product of sprite velocities
Turn into a Node binary for generating projects.
Add Spriter support into the engine
Add a simple level editor

Changelog

0.2.0 Initial API Docs + Better Tiled Integration + Sloped Tiles

quintus_tmx.js TMX file extraction
Multi-layer TMX Support + Sloped Tiles by lendrick
TMX Object layer support
TMX Repeater support
TMX Sensor tile support
SVG and Physics refactoring by drFabio
Generate collision points performance optimization
Disasteroids Example
Initial Platformer Full Example
Initial API Documentation
Conditional Render and step support
Tower Man Example

0.1.6 Assorted Fixes - 9/6/13

Fix by A11oW to Quintus input
#41 - repeated rounding issues
Change SpriteSheet to use tileW, tileH instead of tilew, tileh
Add flipping to AIBounce componet by fariazz
Add optional bounding box to viewport by fariazz
Initial experiment with YuiDoc

0.1.5 Assorted Fixes - 8/4/13

Assorted gruntfile stuff
Add hide, show, stop and start to stages
Per-sprite gravity override
Multi-layer support for TMX files by fariazz
Fix to scene locate method #46 by noahcampbell
Add support for sensors
Add support for loading scenes from a JSON file
auto-focus when keyboard controls are active
Add development mode: Quintus({ development: true }) to make changing assets easier
Allow for easier opacity tweening
Simple TMX/XML parsing from kvroman
Touch example fix from scottheckel

0.1.4 Updated Node + Grunt - 4/13/13

Updated Gruntfile.js and dependencies to latest versions

0.1.3 Sprite Platforms and Assorted Fixes - 4/7/13

Added collision loop for Sprites and added platforms example
Added Repeater to platformer and fixed default type
Fix to Joypad
Fix to sprite gridding
Child sort and flip support
Tile check fix from izidormatusov
Initial API Docs

0.1.1 UI and Web Audio fixes - 2/17/13

Fixed UI touch location on iOS when canvas is smaller than full screen
Fixed asset loading in Web Audio

0.1.0 Web Audio and better Tweens - 2/16/13

Note: this release was replaced with 0.1.1, which added no new features but fixed a couple bugs
Added support for Web Audio output (iOS6 supported, Yay!)
Added audio example in examples/audio
Removed sound sprite support
Added support for Audio looping (via Q.audio.play("name", { loop: true }))
Added sound stopping support (Q.audio.stop() to stop all, `Q.audio.stop("name") to stop 1)
Moved non-working SVG, DOM and Physics modules to extra/

Added support for functions as direction options to follow (suggested by @gvhuyssteen )

For Example:

  stage.follow(player, {
     // Always follow x
     x: true, 

     // Only follow y if the player has landed
     y: function(sprite) { return sprite.p.landed > 0 } 
  });

Improved tween animations, by @fqborges fixes tween chaining and adds in an example in examples/tween/

Changes to your code:

You must call Q.audio.play instead of Q.play to play sound
If you were using sound sprites, they have been removed.

0.0.5 UI Example + Bug Fixes - 2/2/13

Fix to Q.UI.Button with an Asset
Fix to MouseControls on Android
Added UI example

0.0.4 GameState and MouseControls - 1/27/13

Added Q.GameState for storing global game state ..
.. listening for events on changes to global game state
Added Q.input.mouseControls() for tracking mouse/touch locations
Couple fixes to Q.UI.Text
Fix to Touch module on iOS

0.0.3 Move to update from step - 1/19/13

Transitions scene from step to use update
Simplified Sprite stepping with update (no _super necessary any longer)
Added Scene locate method
Add touch example with drag and locate details
Added drawableTile and collidableTile to Q.TileLayer

Changes to your code:

Your sprite's step method should no longer call this._super(dt) (in fact, sprites don't define a default super method anymore, so it'll cause a bug)- events are now handled by the Sprite.update(dt) method

0.0.2 Reworked Sprites and Scenes - 1/1/13

Full SAT collision (rotation / scaling)
Container / Children support
Removed jQuery Dependency
Reworked collisions (need optimizations)
Add Quintus.UI module for containers, buttons and labels.
Added animate and tween support

0.0.1 Unrelease

Initial Release
Basic Sprite and Scene Support
Limited Audio
jQuery Dependency
Keyframe animation support
2D Platformer controls and animation
Limited SAT Collision (no rotation / scale)

Comments

Quitnus not loading assets

I copied the code from the basic Quintus platformer from the website home page with the same assets and nothing is loading. I tried running the game from a webserver (more specifically mongoose server) which also didn't work. The assets were being loaded with the Q.load function.
invalid

opened by chand1012 26
Fix Mouse position in canvas with padding

The mouse position in an element is measured from the top left corner. When a margin or padding is used this starts outside the drawable area of the canvas. This needs to be taken into account.

opened by mpkorstanje 18
Collision isn't working in Breakout example

Hi, i'm working on a litte game. The player just catches some symbols who are falling down from the top to to bottom with a paddle. Now the problem is, the collision will detect only the first time, then I delete the object with this.destroy(); after that i add a new symbol object with this.stage.insert(new Q.Icon()); this works fine, but if the player now tries to catch that new object, the collision won't be triggered.

I am using Chrome: Version 35.0.1916.153 and also tried to use firefox, but same problem.

The breakout example, has the same problem: http://html5quintus.com/quintus/examples/breakout/
bug high priority

opened by Stumpftopf 16
added gamepad support and some samples

Hi @cykod :)

I wrote a little plugin for quintus to support gamepads :) I use the fantastic lib https://github.com/inequation/gamepad.js and wrote some code arround it so it maps the events from gamepad.js to quintus.

The only things todo, to use this is to include the gamepad.js and the quintus_gamepad.js

In the game code only something like this must be called when initializing Quintus

var Q = window.Q = Quintus() .include("Sprites, Scenes, Input,GamePadInput, 2D, Anim, Touch, UI")

I added in the examples folder two new examples which are showing that it works ;) platformer_tmx_gamepad tower_man_gamepad

At the moment only Xbox360 gamepads are configured.

opened by tuxBurner 9
Touch event triggered twice on Android

Touch event on mobile is being triggered twice on Android. To test click on any of the numbers (tested on Android 4.1 browser), it will show the number twice:

http://static.pablofarias.com/racinggame2/

May have to do with the way I'm using the viewport. What I want to achieve is to fit to width of the device without showing more of the game world. Using maximize: "touch" shows a blank screen on my phone, using maximize: true, messes up the alignment of the GUI and the background (the link above only has the GUI. I'll be releasing the full game once finished in a blog post).

(basically I just want to re-scale the entire game to fit the screen, the way it happens in LimeJS for instance, without showing extra parts of the level)
bug invalid

opened by fariazz 9
Scrollable Container with a scrollbar (Feature)
To create a container which can have a text or blocks which can be scrollable. Examples -

Like a instruction screen displaying the instructions.

Objective screen

Achievement screen displaying all the achievements
opened by NikunjShah 8
Gap with TMX map and spacing tileset

Hello

I use an TMX map with 1px spacing between tiles. Tiles on first line are correctly rendered. But other line have tiles gap. line 2 : 1 tile gap Line 3 : 2 tiles gap etc

I use this tileset (16 x 16 with 1px spacing) My tmx file : http://paf.im/WTrxX

I've a bad config or it's a bug ?

opened by Sparksx 6
Fix for UI.Text align

align is used to both set the alignment in the front string and to physically move the location where the font string is to be. The end result is that align is always centered.

This fixes this by making the default alignment centred and removing the physical positioning of the text.Bounding points are adjusted accordingly.

opened by mpkorstanje 6
loading local files like json

Hi,

I think it's very important than we can load local resources like the json files. This is significant if you want make a local game to run in a mobile.

I don't know what is exactly the problem, I suspect this is a safety restriction. But another JS game engine (similar to quintus) can load this type of files: https://github.com/Galloman/ss2d

I suggest than you can investigate how can resolve the problem watching the ss2d source code (ResourceManager.loadResources).

regards,

opened by fraespre 6
Separate rendering engine/code

Forgive me for not knowing the code well enough, but is there a clear place in the code where a renderer is defined?

I am looking to use Pixi for rendering, but am really wary about the major framework (Phaser) that uses it. Quintus is more than enough, aside from having Pixi/webgl support.

For that matter, if there is a clean spot to add/change/remove renderers, I am sure work could be done to get threejs in here too!
feature request

opened by JaredSartin 6
Two digit sprite numbers in level tile array?
If you have a tile sprite with many tiles and edit it in a monospace font, it's easier to edit if all numbers have two digits. That way you can follow the columns more easily. Today it looks like this:

[1,2,3,1,5,4] [11,12,13,14,15,15]

It would be nice if it was also okay to add the tile sprite numbers like this:

[01,02,03,01,05,04] [11,12,13,14,15,15]

Thanks for a very exciting game platform!
opened by tkahn 5
Any interest in creating a proper npm package?
Is there any interest in creating a proper NPM package for quintus?

Namely, one that can be yarn/npm installed

And another that can be injected into a SCRIPT tag

Have this setup working locally and if I get some bandwidth I can do a PR here
opened by frankandrobot 0

Cannot read property 'getAttribute' of null - Trying to load tmx file

Hello,

i've a problem when i try to load my tmx max :

Uncaught TypeError: Cannot read property 'getAttribute' of null at Function.Q._tmxExtractAssetName (quintus_tmx.js:40) at Function.Q._tmxLoadTilesets (quintus_tmx.js:113) at Function.Q.stageTMX (quintus_tmx.js:251) at Class.sceneFunc (app.js:13) at Class.loadScene (quintus_scenes.js:313) at Function.Q.stageScene (quintus_scenes.js:1082) at Function. (app.js:20) at loadedCallback (quintus.js:1889) at XMLHttpRequest.request.onreadystatechange (quintus.js:1761)

here is my tmx file

<?xml version="1.0" encoding="UTF-8"?>
<map version="1.0" tiledversion="1.1.3" orientation="orthogonal" renderorder="right-down" width="100" height="17" tilewidth="64" tileheight="64" infinite="0" nextobjectid="1">
 <tileset firstgid="1" source="game-tiles.tsx"/>
 <layer name="background" width="100" height="17">
  <properties>
   <property name="type" value="0"/>
  </properties>
  <data encoding="csv">
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
4,4,4,4,4,4,4,4,4,4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
4,4,4,4,4,4,4,4,4,4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
4,4,4,4,4,4,0,0,4,4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
4,4,4,4,4,0,0,0,0,4,4,4,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
</data>
 </layer>
 <layer name="collision" width="100" height="17">
  <properties>
   <property name="collision" value="true"/>
  </properties>
  <data encoding="csv">
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
0,0,0,0,0,6,2,2,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
10,0,0,0,6,3,3,3,3,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,
2,2,2,2,3,3,3,3,3,3,2,2,9,0,0,0,7,8,8,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0
</data>
 </layer>
</map>

my tsx file is in the same folder than my tmx file (data folder)

and here is my app.js file

window.addEventListener("load", function(){

   var Q = window.Q = Quintus()
       .include("Sprites, Scenes, Input, 2D, Anim, Touch, UI, TMX, Audio")
       .setup({
           maximize: true
       }).controls(true).touch();

    Q.scene('level', function(stage) {

      Q.stageTMX("level.tmx",stage);

    });

    //On lance la scene à l'emplacement 0
    Q.loadTMX("level.tmx", function(){

      Q.stageScene('level');

    });

});

opened by GuillaumeGascon 2

Sprite asset with image format .png not rendering on safari

Hi!

I made a little hybrid game, i' tested all way around on edge, firefox, chrome, (also on android) and everything is fine except for safari. When i open safari i got a surprise. the player sprite becomes invisible. I have no idea why. Even if i use .jpg the image stills invalid.

Additional info: i exported the image from gimp to .png (the same as others sprites) filesize:31kb resolution:284x175

Any suggestion? Should i change the .png format to another suggested? have you been here before? The image is just

opened by ghost 2
Can't make the z index order work
I'm trying to change the stacking order of my sprites by setting the z property in the init function. But no matter what value I put in, it always stacks the elements in the order I add them to the stage.

Q.Sprite.extend('Test',{ init: function(props) { this._super(props, { w: 20, h: 20 }); } }); stage.insert(new Q.Test({ z: 2, color: 'blue' })); stage.insert(new Q.Test({ z: 1, color: 'red' }));
opened by ricardo 0
Collision Issues: Only Background detected as being collide.
If I introduce in any way the background, the hit event of the player always gets activated since Quintus believes that the player is colliding with the background always.

http://codepen.io/acarlstein/pen/yVaBzv

How can I prevent any object to "collide" with the background?

How can you handle multiple collision. For example, two objects have already collide. We make the "glued" together and a third object collides?

Code:

` /**

Libraries loaded:

-> https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js

-> http://cdn.html5quintus.com/v0.2.0/quintus-all.js

-> https://cdn.rawgit.com/cykod/Quintus/master/lib/quintus_scenes.js

Note: To turn text js into cdn go to http://rawgit.com/

Warning: If one of the sources for the resources (such the images being used), it stop existing or it is not available, this code will not work. */

var backgroundUrl = "http://www.elblender.com/wordpress/wp-content/uploads/2016/11/bg5.jpg"; var player1WalkUrl = "http://www.elblender.com/wordpress/wp-content/uploads/2016/11/p1_walk.png"; var player2WalkUrl = "http://www.elblender.com/wordpress/wp-content/uploads/2016/11/p2_walk.png"; var resourcesUrlList = [backgroundUrl, player1WalkUrl, player2WalkUrl];

// Include Sprite module and set game's canvas size var Q = Quintus().include("Sprites, Anim, UI, 2D, Input, Scenes, Touch") .setup({width: 800, height: 480})
.controls();

Q.Sprite.extend("Background", { init: function(background){ this._super(background, { asset: backgroundUrl, x: Q.el.width / 2, y: Q.el.height / 2, collisionLayer: 0, type: Q.SPRITE_NONE }); } });

Q.Sprite.extend("Player1", { init: function(player){ this._super(player, { sprite: "player1", sheet: "player1", speed: 50, type: Q.SPRITE_FRIENDLY }); this.p.x = this.p.w; this.p.y = (Q.el.height / 2) - this.p.h; this.add("animation"); this.play("default"); this.on("hit", "collision"); }, "step" : function(dt){ this.p.x += this.p.speed * dt; this.stage.collide(this); }, "collision" : function(col){ console.log(col.obj); if (col.obj.isA("Player2")){ col.obj.destroy(); this.destroy(); Q.clearStages(); Q.stageScene("level1"); } } });

Q.Sprite.extend("Player2", { init: function(player){ this._super(player, { sprite: "player2", sheet: "player2", speed: 50, flip: "x", type: Q.SPRITE_ENEMY }); this.p.x = Q.el.width - this.p.w; this.p.y = (Q.el.height / 2) - this.p.h; this.add("animation"); this.play("default"); }, "step" : function(dt){ this.p.x -= this.p.speed * dt; } });

Q.scene("level1", function(stage){ // Trying to find the right one //stage.insert(new Q.Background()); //stage.insert(new Q.Repeater({asset: backgroundUrl})); //stage.collisionLayer(new Q.Background()); //stage.insert(new Q.UI.Container({x: Q.width/2, y: Q.height/2, fill: "rgba(255,0,0,1)"})); //stage.insert(new Q.Sprite({asset: backgroundUrl})); stage.insert(new Q.Player1()); stage.insert(new Q.Player2()); });

var playerSheet = { tilew: 66, tileh: 92,
sx: 0, sy: 0,
w: 256, h: 512 };

var playerAnimationFrame = { default: { frames: [0, 1, 2, 4], rate: 1/4 } };

Q.load(resourcesUrlList, function(){
Q.sheet("player1", player1WalkUrl, playerSheet); Q.sheet("player2", player2WalkUrl, playerSheet); Q.animations("player1", playerAnimationFrame); Q.animations("player2", playerAnimationFrame); Q.clearStages(); Q.stageScene("level1"); });

`
opened by acarlstein 0

Owner

Pascal Rettig

GitHub http://html5quintus.com

The project integrates workflow engine, report engine and organization authority management background, which can be applied to the development of OA, HR, CRM, PM and other systems. With tlv8 IDE, business system development, testing and deployment can be realized quickly.

介绍项目集成了工作流引擎、报表引擎和组织机构权限管理后台，可以应用于OA、HR、CRM、PM等系统开发。配合使用tlv8 ide可以快速实现业务系统开发、测试、部署。后台采用Spring MVC架构简单方便，前端使用流行的layui界面美观大方。采用组件开发技术，提高系统的灵活性和可扩展性;采

38 Dec 27, 2022

Recreated Chromium T-Rex game in Phaser 3, written in HTML5 & TypeScript

Chromium Dino Game - Phaser 3 + TypeScript + Parcel Chromium Dino Game Clone using Phaser 3 + TypeScript + Parcel Play You can play online here Dino P

3 Jun 21, 2022

Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering.

Phaser - HTML5 Game Framework Phaser is a fast, free, and fun open source HTML5 game framework that offers WebGL and Canvas rendering across desktop a

33.4k Jan 7, 2023

HTML5 game framework for web and iOS

#LimeJS ##Getting started: ###Mac OS X and Linux users: Requirements: Python 2.6+, Git Clone the git repo (you have probably already done that): git c

1.4k Dec 1, 2022

Free, open source game engine online

microStudio is a free, open source game engine online. It is also a platform to learn and practise programming. microStudio can be used for free at ht

719 Dec 30, 2022

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

2 Oct 31, 2021

Melon.js game engine bindings for Solid

Melon Solid This project fuses the awesome frameworks Melon.js (for game development) and Solid.js (for making websites). By combining them together y

10 Oct 4, 2022

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.)

16 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

4 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

3 Sep 5, 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

3 Oct 30, 2022

NFT Game Starter Project: https://github.com/buildspace/buildspace-nft-game-starter

Running React on Repl.it React is a popular JavaScript library for building user interfaces. Vite is a blazing fast frontend build tool that includes

2 Feb 11, 2022

Conways-game-of-life - A Conway's Game Of Life project using Python

conways-game-of-life A Conway's Game Of Life project using Python JavaScript Devlog January 1st 2022: also need to remember Python's syntax a bit will

0 Sep 23, 2022

Slime jumper game is a simple game that requires you to escape from the enemies that come your way.

Slime Jumper What is this game? The slime jumper game is a game with a simple logic (but it was not so easy to do) where you have to escape from the e

2 Mar 1, 2022

Built for fun and game activities! you can submit scores of players, create a new game, and refresh to see who is on top of the leaderboard. It was built with JavaScript, HTML, and CSS. Thanks to the central LeaderBoard API service all data is preserved

LeaderBoard The leaderboard website displays scores submitted by different players. It also allows you to submit your score. Mini Presentation Additio

20 Jun 30, 2022

INeedHelp is a Game Boy, Game Boy Advance, and Nintendo DS emulator written in JavaScript and TypeScript.

INeedHelp INeedHelp is a Game Boy Advance and Nintendo DS emulator written in JavaScript/TypeScript. FAQ Why is it called INeedHelp? You would need he

6 Jun 29, 2022

This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X and O on a 3x3 grid.

Tic Tac Toe Game This is a Tic Tac Toe game built with HTML, CSS, and JavaScript. It is a simple and fun game where two players take turns marking X a

4 Mar 4, 2023

Mini projects built with HTML5, CSS & JavaScript. No frameworks or libraries

20+ Web Projects With Vanilla JavaScript This is the main repository for all of the projects in the course. Course Link Course Info Website # Project

14.1k Jan 4, 2023

This is Basic calculator. This is made up of HTML5,CSS and JAVASCRIPT.

<title>BasicCalculator</title> <style> @media screen and (max-width : 574px){ h2{ font-size: large; }} @media screen and (max-width : 430px){ h2{ font

1 Dec 22, 2021