Works in Chrome, Safari, Firefox, iPhone, Android and Pixel mobile phones, iPad and other tablets.
Mosaic's ice cube - Just add it.
Download Mosaic.js Game Engine

Latest Build: Nov 23, 2016

Downloaded 199 times!

Mosaic.js is free for personal use and always will be

Game Development License Agreement

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.

Support Mosaic

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

Or submit a PayPal donation.

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 small folder sprite 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(); // Check if viewing on a mobile device Context = new HTML("game", 640, 480); // Create game canvas InitializeKeyboard(); // Keyboard controls Mouse.Initialize("#game"); // On desktop Touch.Initialize("#game"); // On mobile devices Sound.Initialize(); // Init audio engine DisableScrollbars(); // Disable scrollbars var dog_x = 0; var dog_y = 0; var A = new Segment(100, 120, 150, 140); // Line segment A var B = new Segment(97, 50, 180, 145; // Line segment B setInterval(function() { ClearCanvas(); Press.capture(Mouse, Touch); // Capture mouse or touch (whichever was done) // Check if a sprite has been clicked (pressed) if (Press.ed && dog.pressed()) { /* Bark! */ Sound.play(SFX_BARK); } // Capture keyboard controls 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); // Draw something at mouse coordinates dog.draw(dog_x, dog_y); // Draw controllable game character dog.rot(dog_x, dog_y, 35); // Draw 35-degree rotated game character dog.rotscale(dog_x, dog_y, 2.0, 2.0, 35); // Draw rotated and x2.0 scaled game character // Draw scaled and rotated around specific point (x=7,y=7) on the sprite dog.rotscale2(dog_x, dog_y, 2.0, 2.0, 35, 7, 7); // Draw animated sequence of tiles [14,15,16,17] from spritesheet "dog" // Also x2.0 scaled with delay between frames counted in number of frames to skip dog.rotAnim(dog_x, dog_y, [14,15,16,17], 35, 2.0, animationFrameDelay); // Mouse coordinates fall inside dog sprite if (dog.pointInside(Mouse.x, Mouse.y)) DoSomething(); // Draw lines, using line thickness and color A.draw(2, "red"); B.draw(2, "blue"); // Check if line A intersects with line B, and get intersection point if (A.intersect(B) == DO_INTERSECT) { var px = window.int_x; var py = window.int_y; } // Get line's length var length = A.length(); // Get line's center var center = A.center(); // Get line's normal vector 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:

Planned items next:
Mosaic.js by River Tigris, LLC (Tigris Games)

My name is Greg Sidelnikov (aka Dev Tigris on YouTube.) I am an owner of small indie game development company Tigris Games. The official name of my company is River Tigris, LLC. but also known as simply Tigris Games. Welcome to Mosaic, a JavaScript programming engine I started in January 2015, as part of my game development tutorial series on YouTube.

About the author I've been programming in JavaScript since it came out as part of Netscape Navigator. Independent game development is something I have always wanted to pursue as a career, and because JavaScript is finally catching up with modular design in EcmaScript 6 specification (released in 2015) what could be better time to start making my own game engine in JavaScript?

Not to pat myself on the back or anything, but my YouTube JavaScript game development tutorial series has 111,820 views combined. Putting so many hours into my game development tutorial work, naturally led to creation of my own JavaScript engine. And here it is, I called it Mosaic. Because making games is usually associated with excellence in multiple creative areas, such as programming, art and sound design. So to me, making a video game is a lot like putting together a mosaic consisting of many different pieces.

How To Use mosaic.js

Mosaic or "mosaic.js" is a library, that can be added to your web page using <script> tag, and you're ready to start programming games inside your web page. It's been tested on mobile devices and it works surprisingly well. You can even add Push Notification messages to a game developed with Mosaic.

Mosaic graphic UI is currently in development by me (Twitter, Facebook), just one person.

Mosaic is completely free, and here is how you can support my work and you can make a PayPal donation to help development of Mosaic JavaScript game programming engine.

Send me a link to your game developed in Mosaic, and I will included it on the homepage here. Or fork it out from my GitHub account.