background preloader

Game Closure - Game Everywhere

Game Closure - Game Everywhere
Related:  Gaming

Welcome to starmelt's Crafty tutorials! · starmelt/craftyjstut Wiki LimeJS HTML5 Game Framework jQuery Mobile Making Games with JavaScript and Crafty This is a guest post by Louis Stowasser, the creator of Crafty The day has come where JavaScript games are possible and not only possible but simple. This article will show you how easy it is to create games in JavaScript using the canvas tag and even basic divs with the help of a new game engine called Crafty. This tutorial will demonstrate how to build a Pokemon-style RPG with Crafty. Before we get started there are some key concepts to learn which may differ to what you are used to. If you are used to Object Oriented programming, this is similar to one level of multiple inheritance. Crafty uses syntax similar to jQuery by having a selector engine to select entities by their components: Crafty("mycomponent")Crafty("hello 2D component")Crafty("hello, 2D, component") The first selector will return all entities that has the component mycomponent. If you are a bit confused, fear not, first hand experience will make it click. Supplies We need to setup our Crafty game. Scenes Sprites

Crafty - How Crafty Works Crafty is a JavaScript game library that can help you create games in a structured way Key Features: Entities & Components - A clean and decoupled way to organize game elements. No inheritance needed! Canvas or DOM - Choose the technology to render your entities; it will look exactly the same. Other Goodies: Thriving community - Help is readily available in the forum. Entities are the basic building blocks in Crafty. Crafty.e("2D, DOM, Twoway").twoway(3); This creates an entity that is positioned in the 2D world, is drawn to the stage using DOM elements and can be moved left and right using the arrow keys at a speed of 3 pixls pr frame. A component is a reusable piece of functionality that can be added to one or more entities. I also changed the size of the entity and gave it a color so you can see it. Entities can react to events that occur in the game. myEnt.bind("EnterFrame", function() { this.x--;}) And the result

Mobile App Development Framework. JavaScript and HTML5. Download Sencha Touch Free. | Sencha Touch Sencha Touch is the leading MVC-based JavaScript framework for building cross-platform mobile web applications. Sencha Touch leverages hardware acceleration techniques to provide high-performance UI components for mobile devices. With over 50 built-in UI components and native looking themes for all major mobile platforms, Sencha Touch provides everything you need to create impressive apps that work on iOS, Android, BlackBerry, Windows Phone, and more. The framework includes a robust data package that can consume data from any backend data source. Sencha Touch is available as a free download. High-Performance, Native-Looking UI Widgets Sencha Touch provides the industry’s most comprehensive collection of high-performance UI widgets such as lists, carousels, forms, menus, and toolbars, built specifically for mobile platforms. Adaptive Layouts, Animations, and Smooth Scrolling Backend Agnostic Data Package Advanced Mobile Charting Package Device Features and Native Packaging

Tutorial: Developing HTML5 Canvas Games for Facebook with JavaScript – Part 1 » The Log Book of Manuel Kiessling This is a multi-part tutorial series. You are currently reading part 1. Some days ago, my son asked me how computer games are made. He’s five years old and couldn’t quite imagine how games are created, because “you can’t just paint them like animation movies, can you?”. I quickly realized that explaining it to a child is really difficult. The result is a simple yet fully-functional 2D space shooter, available on Facebook. I never did game development before, and for me, the two major takeaways from this experience are a) JavaScript/Canvas game development is much more simpler than you think, and b) Facebook integration actually is a lot of fun. I mention the second point because I always greeted Facebook development with smiles, but to be honest, it’s a very pleasing experience, and the whole social graph thing makes a lot of sense for games. But let’s talk about game development first. The second step of every loop cycle is the draw step. Where does the “world” actually come from?

Quintus JavaScript HTML5 Game Engine a platfomer in ~80 lines of code, you can edit the code on the left. Click to focus, arrow keys to move. more A breakdown of the example is below. Create an HTML file, pull in the Quintus library and setup the engine. Quintus has a modular engine that lets you pull in just the modules you need and can run in multiple instances on a page. <html><head><script src=' var Q = Quintus() .include("Sprites, Scenes, Input, 2D, Touch, UI") .setup() .controls() .touch(); </script></body></html> Quintus supports an event-based, hybrid Object-Oriented and Component-based approach, allowing for both a standard inheritance model with support for reusable components. Quintus let's you easily create reusable scenes that can be swapped in and out by loading them onto stages. Quintus features easy asset loading, sprite sheet generation.