com.I2TMLabs.h5c3

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.

Browsers Supported:

Only Chrome Browser is supported.

Platforms & Devices 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)

Features

- 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

Component List

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

Systems List

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

Example of primary HTML file

<!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>

Example of Main Game File

/*******************************************************************************************
 * Main program - A skeleton project for you to start from
 *
 * @package	com.i2tm.web.template
 * @author Andrew Donelson ([email protected])
 * @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();
		}
    });

Designing your graphics

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.