Building HTML5 Metro Games For Windows 8 About two months ago I did one of my HTML5 game development workshops at Microsoft’s NYC office. It was a huge success with over 100 registered attendees. One of the highlights of my workshop was showing people just how easy it is to build an HTML5 game for Win8 in just a few minutes. By leveraging the Impact game framework, it is easy and fun to build a Metro game with very little modification to the core source code. I figured I would go through what I did before the workshop to get Super Resident Raver, a modified version of the game I show people how to build in my workshops and book, running on Win8. Metro HTML5 Apps One of the most exciting aspects of development for Windows 8 is the ability to build a native app using nothing but HTML and JS. As you can see, there are now three pillars for building Win8 apps: C++/XAML, C#/XAML and JS/HTML. Getting Up And Running Once I had a basic Impact game ready to go, it was incredibly easy to get it set up in Visual Studio. Optimization and
Real-time synchronous multiplayer 3D gaming with HTML5 - The Artillery Blog by Ian Langworth 14 May 2012 Six weeks ago we set out to see if we could build a real-time, “twitch” 3D game in the browser using HTML5. We built a few games and were pleasantly surprised with what we achieved. You can test one of our creations here: Air Hockey Graphics WebGL has pretty good browser support at the moment, and three.js is an essential library because of the WebGL boilerplate it handles for you. Many of the examples make use of stats.js and dat.GUI for monitoring the frame rate and adjusting settings, which are good tools to include when developing your game. dat.GUI was especially helpful in fine-tuning our latency compensation algorithm and tweaking the game’s appearance, such as light strength and other material properties. We bought the air hockey, mallet and puck models from TurboSquid, and getting them into the browser was easy thanks to three.js’s Blender exporter plugin, which exports Blender scenes as JSON. Networking Of course, latency complicates this process.
boxbox - javascript physics made easy what is boxbox? boxbox is a fun and simple framework for making games with the box2d physics engine. no, i mean really, what is it boxbox is a framework for box2dweb, a JavaScript port of box2dflash, an ActionScript port of box2d, a C++ library. The box2d physics engine is hard to use for a beginner. features simple API work with entities rather than fixtures, bodies, and shapes attach events to entities rather than the whole world reuse common configuration among similar entities built in canvas rendering with image support demos Closure Tools What is the Closure Compiler? The Closure Compiler is a tool for making JavaScript download and run faster. Instead of compiling from a source language to machine code, it compiles from JavaScript to better JavaScript. It parses your JavaScript, analyzes it, removes dead code and rewrites and minimizes what's left. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. How can I use the Closure Compiler? You can use the Closure Compiler as: An open source Java application that you can run from the command line. To get started with the compiler, see "How do I start" below. What are the benefits of using Closure Compiler? Efficiency.
Grunt: The JavaScript Task Runner jQuery webcam plugin The jQuery webcam plugin is a transparent layer to communicate with a camera directly in JavaScript. As there is native support for webcams in modern browsers, it would be great if you could add this feature to the project and use the flash-version as a fallback for older ones. I don't have time for this project at the moment, so a pull request would be great! Overview This plugin provides three different modes to access a webcam through a small API directly with JavaScript - or more precisely jQuery. jQuery webcam example error: No camera was detected. Available Cameras If you activate the filter with the button on the right side of the picture, methods of my already published jQuery plugin xcolor will be used to distort the colors of the Canvas. General information about the interface The following snippet describes the interface of the webcam API: Config Parameter widthThe width of the flash movie. heightThe height of the flash movie. Callback Interface Save Interface webcam.save('/upload.php');
Controlando nuestra WebCam con HTML5 Un sencillo ejemplo en el que accedemos a nuestra WebCam lo que nos permitirá convertir nuestro navegador web en una cámara de fotos utilizando únicamente HTML5, JavaScript y Canvas. Esto es posible gracias al desarrollo de la API getUserMedia, la cual aún no es soportada en todos los navegadores. Gracias a getUserMedia podremos acceder no solo al control de nuestra cámara sino también al del microfóno, aunque debemos tener en cuenta que la especificación todavía se encuentra en fase de desarrollo (la última actualización del borrador se dio el 12 de diciembre). Podéis encontrar toda la documentación oficial en la página de W3C. El mayor inconveniente es el lento soporte que está recibiendo esta API, lo que siginifica que esta aplicación ni siquiera es compatible con muchos de los navegadores modernos. La mayoria de los navegadores móviles, Safari y los navegadores de Microsoft, incluído IE10, se quedan fuera. En realidad el código es más sencillo de lo que podría parecer.
Capturing Audio & Video in HTML5 Many browsers now have the ability to access video and audio input from the user. However, depending on the browser it might be a full dynamic and inline experience, or it could be delegated to another app on the user's device. On top of that, not every device even has a camera. Start simple and progressively If you want to progressively enhance your experience, you need to start with something that works everywhere. Ask for a URL This is the best supported but least satisfying option. Though, if you want to manipulate the image in any way, things are a bit more complicated. File input You can also use a simple file input element, including an accept filter that indicates you only want image files. This method works on all platforms. The data can then be attached to a <form> or manipulated with JavaScript by listening for an onchange event on the input element and then reading the files property of the event target. The files property is a FileList object, which I'll talk more about later.
Acceder a webcam y micrófono con HTML5 En este artículo te expondré una de las características de HTML5 más potentes: la capacidad de acceder a dispositivos como webcam y micrófono. El ejemplo que usaré es uno de los que expuse en uno de mis seminarios y que forma parte de los ejemplos de HTML5 y CSS3 para descargar aunque explicado en detalle. Ver ejemplo completo Funciona 100% en Chrome El ejemplo pretende que recojamos el audio y vídeo de nuestro dispositivo y los mostremos en un elemento video de HTML5. <! Acceso a dispositivos con HTML5 HTML5 nos permite acceder, siempre que el navegador lo permita, a dispositivos como webcam y micrófono a través del método getUserMedia. Como ves comprobamos que cada motor (webkit, microsoft, gecko) puede tener su propio método getUserMedia. navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia; Perfecto, ahora pedimos acceso al dispositivo: Rating: 8.3/10 (9 votes cast) Te puede interesar:
Learn to develop for Windows Phone 8 in one weekend with Channel 9 You can never have too many hobbies. You also shouldn’t be living life not accomplishing goals you’ve set for yourself in concrete or passing. Learning how to develop is rewarding in and of itself. Channel 9 is Microsoft’s community site for developers. If you want to develop for Windows Phone 8 there’s a new series called Windows Phone 8 Development for Absolute Beginners. Before we bake a cake, we need to make sure we have all the ingredients. Other than that, you’ll basically need to be on a machine that has Windows 8 installed. The video series on Channel 9 is presented was put together by Bob Tabor, Clint Rutkas, and Larry Lieberman. While you’re learning about developing for Windows Phone 8 don’t forget to check out the DVLUP program from Nokia. Ready, set, learn. Source: Channel 9
Creating a New Cocos2d-x Project for Windows Phone 8 This article explains how to create a new Cocos2d-x project for Windows Phone 8. Archived: This article is archived because it is not considered relevant for third-party developers creating commercial solutions today. If you think this article is still relevant, let us know by adding the template {{ReviewForRemovalFromArchive|user=~~~~|write your reason here}}. This article was created for cocos2d-x v2.0.3 beta port for Windows Phone. Introduction Cocos2d-x is a very popular 2D game framework. You can download the Cocos2d-x Windows Phone 8 variant from their website. You can import the Cocos2d-x project to Visual Studio, but soon you'll notice that the whole framework is actually built inside a HelloWorld application. Tip: If you're going to port your existing project then it may be a good idea to import the original Cocos2d-x project first and run the tests. Setting up the project Download the Cocos2d-x Windows Phone 8 version. Now you should try to build and run the new project.
Porting Cocos2d-x Games for Windows Phone 8 This article shows how to port existing Cocos2d-x games for Windows Phone 8 with an example game. Note that it uses the instructions in Creating a New Cocos2d-x Project for Windows Phone 8, which explain how to add Cocos2d-x to your Windows Phone 8 project and prepare a "bare bones template" suitable for creating a new game of copying in the resources of the game you want to port. Introduction This article will demonstrate how to port existing Cocos2d-x games to Windows Phone 8 by porting the game Tweejump. Tweejump is a platform jumper game, where you have to tilt your phone to control the character. TweeJump in Github License: The code is released under the MIT License. All images are copyrighted by Sergey Tikhonov. You can download the TweeJump project windows phone 8 project from You can also take a look at the original Tweejump project page at Preparation // Here's a difference. Adding the code