Please submit a donation at Patreon if you are interested in future of this project.

Mosaic.js is free for making your own games, as long as Mosaic Engine logo retained during the loading screen. Unlock publisher's edition for only $25 to remove the logo and obtain publishing rights on any platform: View all licensing options here.

Dev Note Hey guys (and gals, of course,) I have just set up this page and I am currently working on documentation for my game engine Mosaic.js. Until then the demo to the left explains all functionality you need to get started making your own games. If you need help, please email me at dev@tigrisgames.com if you have any questions, suggestions or feature requests. Please support the project on Mosaic's Patreon page if possible. Simply download Mosaic, and run the index.html file in your favorite browser, you will see the standard demo displayed on this page. This should explain basic function of Mosaic while I'm working on the next build you can fork at via this GitHub.

Mosaic Demo

Note: Source code for this match 3 game is © 2017 TigrisGames.com. By using this software you accept that the source code was gracefully provided here under CC as an example of a game demonstrating capabilities of Mosaic.js (originally Tig_GE.js core). Copying or reusing Gemini core gameplay software for commercial purpose is prohibited.

Gemini is a TigrisGames.com game. The game souce code example is protected under Creative Commons Non Commercial and No Derivatives license, for personal use only.

© 2017 River Tigris, LLC. View Legal Code

Attribution-NonCommercial-NoDerivs

Basic Tutorial Mosaic.js simplifies JavaScript game programming. This is an excerpt of $(document).ready(()=>{...}) a working Mosaic game loop, from initializing the engine, loading and playing sounds, creating keyboard and mouse controlled characters, drawing, animating, rotating and scaling sprites. Note, as long as you have dog.png in default resource folder, it becomes automatically available through dog variable name. You never have to declare it yourself, just start drawing the dog by calling dog.draw method. IsMobile(); Context = new HTML("game", 640, 480); InitializeKeyboard(); Mouse.Initialize("#game"); Touch.Initialize("#game"); Sound.Initialize(); DisableScrollbars(); var dog_x = 0; var dog_y = 0; var A = new Segment(100, 120, 150, 140); var B = new Segment(97, 50, 180, 145; setInterval(function() { ClearCanvas(); Press.capture(Mouse, Touch); if (Press.ed && dog.pressed()) { Sound.play( SFX_BARK ); } if (key.left) { dog_x -= 1; } if (key.right) { dog_x += 1; } if (key.up) { dog_y -= 1; } if (key.down) { dog_y += 1; } if (key.w) { } if (key.s) { } if (key.a) { } if (key.d) { } arrow.draw(Mouse.x, Mouse.y); dog.draw(dog_x, dog_y); dog.rot(dog_x, dog_y, 35); dog.rotscale(dog_x, dog_y, 2.0, 2.0, 35); dog.rotscale2(dog_x, dog_y, 2.0, 2.0, 35, 7, 7); dog.rotAnim(dog_x, dog_y, [ 14 , 15 , 16 , 17 ], 35, 2.0, animationFrameDelay); if (dog.pointInside(Mouse.x, Mouse.y)) DoSomething(); A.draw(2, "red"); B.draw(2, "blue"); if (A.intersect( B ) == DO_INTERSECT ) { var px = window.int_x; var py = window.int_y; } var length = A.length(); var center = A.center(); var normal = A.normal(); }, 24); Loading and Drawing Sprites Made Simple In Mosaic, all sprites are loaded from "resource" folder and automatically converted to JavaScript variables. You never have to declare them, only create them in Photoshop or other art software and drop them into resource folder. That's it! This might seem a little weird at first. But once you get used to it... you'll never want to go back! Simply drop your sprite or spritesheet files into "resource" foldel, and in your code, refer to them as if you already had var sprite declared, where "sprite" is derived from filename "sprite.png". This is done internally by engine's resource manager. For example if your image filename was character.png a sprite object character is automatically created: // Draw sprite that was already automatically loaded from "character.png" file

character.draw(100, 100); Although most of the time it never does, just make sure that your sprite's filename isn't named after a JavaScript reserved keyword such as class, for, if, and so on.

Mosaic.js is a JavaScript Game Development Library that makes it easier to program games in JavaScript's canvas. But WebGL and Graphic UI support is planned for the future. For now it's just a programmer's gamedev toolbox. Currently available features: Clean syntax

Sprite Animation

Loading sprites from a large Spritesheet

Automatic sprite and sound loading from resource folder.

Audio layer for playing music and game sound effects.

2D vector and collision detection library

Keyboard controls

Mouse controls Planned items next: Frame-independent animation

WebGL Rendering

Parallax layers

Graphic UI

Terrain painter with 2D brushes

Inverse-Kinematics (IK) Animation (2D bone animation)

Physics

2D Camera Spritesheet Support All sprites are loaded automatically from resource folder and that speeds up development time. But of course, if you want, you can create your own programmatically! Use Sprite and Spritesheet class to create your own sprites, draw, animate and rotate them. Or all that at the same time.

var grid = new Spritesheet("spritesheet.png");





grid.draw(256, 64);





grid.drawAnimated(127, 39, [17, 18, 19, 20]);