GitHub Website: http://nlaakald.github.io/H5C3-Framework
Official Website: http://www.i2tmlabs.com/
HTML5 & CSS3 compliant Framework that provides Web Apps that work on Mobile devices, Desktops and Even Game consoles. No installation required, everything resides int he cloud. Entire framework and website was designed with the developer in mind.
Only Chrome Browser is supported.
I2TM Labs is designed around the Google Chromium Framework. No other browser is currently supported at this time. The reason for this is simple...Google Chrome just works, flawlessy with all W3C standards. Microsoft Internet Explorer, Apple Safari have bugs and issues which even though a work around could be done...it would diminish your overall experience with our services and applications.
iOS 4.3 & Later Android 4.0 & Latar Windows XP Service Pack 2+ Windows Vista Windows 7 Windows 8 Mac OS X 10.6 or later Ubuntu 10.04+ Debian 6+ OpenSuSE 11.3+ Fedora Linux 14 Advanced Users Can also Play use our services on these platforms Xbox 360 Playstation 3 Wii U Wii (Possible...Some signs of issues on the forums)
- 100% HTM5 & CSS3 Compliant - Easy to use, Rapid Application Development - Integrated Developer Window w/ Console Logging, Statisical Graphs and Profiler - Total size of Framework is 94kb! - Users never have to download & install, Updates are instant & users can use on all platforms. - Simple efficient way of Creating & Extending Scenes, Layers - Factories for Graphics and Sounds - Embeded XML for Resource loading - No Programming - Automatic Intro (I2TM Splash, H5C3 Splash) - State manager - Full Physics Engine powered by Box2D - Entity manager for all graphic objects - Automatic device detection (Touchpad integration) - Seamless Banner (advertising) Just right the WebApp and get paid. - Wide range of platforms supported
- Activator Causes an entity to be inactive (no rendering or physics etc) until another entity moves within range of it. Great for autosleeping all your monsters until the player gets close. - Alpha Changes the alpha drawing of an associated drawable object (sprite, shape, text etc). - Circle Draw a circle. The size is based on the width and height of the associated spatial. - Clip Clips all rendering for an entity to be within the specified rect (in layer relative coordinates). You can also specify an entity, which will clip based on the spatial rectangle of the other entity. You can also do both entity clipping as well as stacking a rectangle clip on top. - Component The base class for components you want to create. - Expiry Automatically expires an entity after a given time. Great for things like bullets that have a known lifetime; just add the expiry component and it will happily kill itself (release) after the given time. - Fade Adds a fade effects to the entity. - Input Convenience component that lets you bind input states and actions to an entity. - Joint Creates a joint that holds to physics entities together. - Layout Automatically positions an entity on screen using a variety of layout options. - Originshifter Shifts the origin of the entity relative to the origin of the layer it's on, with an additional origin ratio adjuster. You can use this to make an entity shift around as the layer origin moves (parallax within parallax). - Overlay Used to lay another sprite over an entity, with options to automagically expire after a certain time limit. Good for things like smoke, explosive damage or muzzle flashs, and where you don't need to create a complete entity. - Particleemitter A particle generator. - Physics Adds 2D physics to an entity. - Poly Draw a polygon - Rect Adds a rectangle to an entity. - Scale Change the draw scale of an entity. - Spatial Represents where an entity exists in 2D space (x, y, width and height). This component is mostly for use by other systems to update and use. - Spin Makes an entity spin. - Sprite Adds a sprite to an entity. - Text Adds display text to an entity.
- Activation Handles activating entities when they get within a certain range of another entity. - Effects A effects system that drives effects like fade. - Entity System A system that processes entities. - Expiry Expiry system. - Input Input system. - Layout Manages the layout of entities - Particles A particle system. - Physics A 2D physics system for entities. - Render Handles rendering of components: sprite, overlay, rect, text, ect. - System The base class for all systems & creating new ones.
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>I2TM: Example Template</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link href="css/default.css" rel="stylesheet" type="text/css" />
<script id="resources" type="text/xmldata">
<resources>
<game name="Template" version="0.1" publisher="I2TM Software" copyright="2012-2013" />
<credit name="Author" entity="Andrew Donelson" url="http://www.i2tmsoftware.com" desc="Author" />
<credit name="playcraft" entity="Playcraft Labs" url="http://www.playcraftlabs.com" desc="I2TM Engine forked from PlaycraftJS v0.5.6" />
<credit name="sm2" entity="SoundManager2" url="http://www.schillmania.com/projects/soundmanager2/" desc="Used in I2TM Engine as primary Sound API" />
<credit name="padolsey" entity="James Padolsey" url="https://github.com/padolsey/string/blob/master/string.js" desc="Used in I2TM Engine extended String API" />
<credit name="marasteanu" entity="Alexandru Marasteanu" url="http://www.diveintojavascript.com/projects/javascript-sprintf" desc="Used in I2TM Engine to add sprintf capability" />
<language name="english" from="english" to="english" />
<language name="spanish" from="english" to="spanish" />
<language name="german" from="english" to="german" />
<!-- <sound name="i2tm" ogg="true" mp3="true" channels="1" file="sounds/i2tm" /> -->
<image name="title" file="images/title.png" />
<image name="puppy" file="images/puppy.png" />
<image name="touchpad" file="images/touchpad_buttons.png" />
<image name="splash" file="images/splash.png" />
</resources>
</script>
</head>
<body>
<script type="text/javascript" src="../h5c3/lib/h5c3.js"></script>
<!-- Engine creates game elements and restores upon friendly exit. -->
<div id="pcGameDiv">
<div>
<div id="cantplay">We're Sorry, But you are not using Google Chrome which is required.</div>
<div id="playnow"><a id="playnow" class="caption" href="javascript:pc.start('js/', ['game.main.js','touch.main.js','factory.entity.js','factory.sound.js','scene.mainmenu.js','scene.touchpad.js','scene.game.js','system.touchpad.js'],'../h5c3/lib/');">Play Now</a></div>
<script type="text/javascript">BrowserIsChrome();</script>
</div>
<div><strong>Game Title</strong><p>replaces this text with the description of your game here</p></div>
<div><strong>Help</strong><p>Replace this with how to play or other helpful information</p></div>
</div>
<div id="pcConsole"><textarea id="pcConsoleLog"></textarea></div>
<canvas id="pcDebug"></canvas>
</body>
</html>
/*******************************************************************************************
* Main program - A skeleton project for you to start from
*
* @package com.i2tm.web.template
* @author Andrew Donelson (nlaakald@gmail.com)
* @version 0.1.0-alpha [dev|alpha|beta|chi|prod]
*******************************************************************************************/
var
GAMENAME = 'I2TM Template',
GAMEVERSION = '0.1.0-alpha',
GAMETAG = GAMENAME + ' v' + GAMEVERSION;
MySceneID =
{
MYSCENE01: 0x0010,
MYSCENE02: 0x0011,
MYSCENE03: 0x0012
};
Game = h5c3.Game.extend('Game',
{ },
{
mainmenuScene: null,
gameScene: null,
init:function(ctx,size)
{
this._super(ctx,size);
},
inactivateAllScenes:function()
{
this.setLayerInactive(mainmenuScene);
this.setLayerInactive(gameScene);
},
setScene:function(scene, scene_id)
{
this._super(scene,scene_id);
},
onReady:function ()
{
this._super();
},
onExit:function()
{
this._super();
}
});
All graphics are designed for Full HD (1920x1080). When the WebApp runs it will detect what kind of devices is is running on and adapt accorinly. For example if the the device is on a desktop it will use the entire window giving a landscape view, if it is on a mobile device which requires touch it will run in portrait mode and get the width (most narrow) and make a perfect square for the Game Panel. In this case it will use the dead center of the image for the detected size.