15 Icon (@font-face) Web Fonts to Improve your User Interfaces Nowadays web applications have greatly increased and they make extensive use of icons for their user interfaces. Thanks to @font-face rule we should include icons within our web pages using icon web fonts instead of single images. In this post we have collected 15 sets of icon web fonts that you can use to design your user interfaces. Web Symbols Web Symbols is a free set of vector html-compliant typefaces, so it might be used in any size, color and browser (okey, mostly — but IE7 for sure). Link Iconic Iconic is a minimal set of icons consisting of 177 marks in raster, vector and font formats — free for public use. Link Fico Fico is a font with 52 simple, commonly used icons and glyphs, served on the web via @font-face. Link Heydings Icons Heydings is a collection of 60 glyphs specifically intended for the accessorization and classification of textual cues such as hyperlinks, navigation elements and buttons. Link IcoMoon Link Tipogram Link Writesocial Link Pictos Link Symbol Signs Link ClickBits Link InfoBits
The Return of Adventure Games The Return of Adventure Games Growing up I never really took a shine to adventure games. I was very impatient and didn’t like to be mentally bested by a game. Only recently am I starting to see the appeal. My girlfriend is creating an HTML5 adventure game for her thesis (using Crafty) so I was introduced to the greats such as Day of the Tentacle. It would be a sin to not mention the massive success of Double Fine’s new adventure game project. This led me to think about implementing the genre for mobile devices and browsers. This then led me to think about a framework for building adventure games where various callbacks would help construct the puzzles and gameplay. ScenesActorsItemsDialogueActions Scenes being small rooms or areas the player can explore to find items and solve puzzles. var Intro = Class(Scene, function(supr) { this.init = function(opts) {}; this.onEnter = function(previousScene) {}; this.onExit = function(nextScene) {}; });
How to make a gravity-based platformer There has been a bit of interest and intrigue about how I made the gravity mechanics in AirScape. So I have decided to write my first tutorial on how I did it, and show how simple it really is. The first thing I must say, is that this method was conceived by Yann Granjon. The basics The most important thing to consider for this to work is the ability of the Platform behavior to change gravity angle. So Yann suggested, and I implemented, gravity zones. (Sorry for blurry pictures, they seem to have lost quality on upload) Here you can see an overview of level 1-1. These shapes are all frames of the same object, 'gravzone'. There are two types of gravzone. The code The code is very simple. Basically, there is an angle for any gravzone. Generally, the rounded gravzones are relative, and the straight ones are not. So anyway, back to the code. This is so that I can overlap two or more gravzones, and end up pulled towards the average of their angles. Flipping 180 And that is pretty much it.
Building a platform game - a beginner's guide You'll learn how to:- Best use built-in behaviors- Switch animations: standing > running > falling ...- Test for progress and award points Building blocks - the objects to insert Key to a platform game are two types of objects: Solids and Platforms. Solids are obvious: they form the floors and walls that restrict players' movements. What's so great about Platform objects in Construct 2 is that you get all their basic behavior that you'd expect, without your having to do a single bit of programming: - When you press the left and right arrow keys, Platform objects move right and left (you can change these keys, say to 'A' and 'D', if you like, or replace them with touch gestures on mobile devices). - When you press the 'Shift' key, they jump (again you can change this key or substitute a touch gesture). - When they've not got a Solid object beneath them, they fall. Part 1: Beginning the build Constructing the playing layout To get you off to a flying (jumping? Tim's Object type is Player.
Apuntes sobre Game Design y programación web - Chalchicha.es Beginning HTML5 Game Development Goals: Learn to use the <canvas> tag.Learn to separate logic to separate source files.Setup a basic game loop. One thing I never liked about programming tutorials is that most are derived from some completed project. We’ll start off with the <canvas> tag. <div align="center"><canvas id="canvas" width="800" height="600"> Canvas not supported. :( </canvas></div> This will place a 800 x 600 canvas in the center of the screen. The canvas is pretty pointless if you can’t draw to it, so create a JavaScript file for your game (mine’s called xong.js). Now your variables and class definitions are part of the global namespace for the page. Let’s look at a basic game loop to place in your js file. This is pretty long so I’ll explain it chunk by chunk. Next we define a class called Game. The Init function should be called before you call Run; it sets up the canvas, buffer, your objects, etc. The Run function is pretty simple. The Update function is where you… update your game logic.
Case Study: Bouncy Mouse Introduction After publishing Bouncy Mouse on iOS and Android at the end of last year, I learned a few very important lessons. Key among them was that breaking into an established market is hard. On the thoroughly saturated iPhone market, gaining traction was very hard; on the less saturated Android Marketplace, progress was easier, but still not easy. Given this experience, I saw an interesting opportunity on the Chrome Web Store. While the Web Store is by no means empty, its catalogue of high-quality HTML5-based games is just beginning to grow into maturity. In this case study, I will talk a bit about the general process of porting Bouncy Mouse to HTML5, then I will dig a bit deeper into three areas that proved interesting: Audio, Performance, and Monetization. Porting a C++ Game To HTML5 Bouncy Mouse is currently available on Android(C++), iOS (C++), Windows Phone 7 (C#), and Chrome (Javascript). So now the question is, can anything be done to make a codebase easily hand-portable? Audio
Moe Fundamentalism Aplicaciones para programar | Curso de computación Cuantos de nosotros que somos desarrolladores, nos hemos visto en la situación en la que estamos desarrollando un proyecto que incluye fragmentos de código que ya hemos desarrollado antes, entonces nos debemos de poner a revisar nuestros viejos proyectos para reciclar el código y claro eso nos consume tiempo, esfuerzo y en algunos casos hasta dinero, es por eso que quiero presentar ante ustedes Snippex, Snippex es un sistema que trabaja en un servidor local, te ayuda a organizar tus fragmentos de códigos y proyectos. Es como si tuvieras una biblioteca de código para una rápida consulta, puedes guardar algoritmos que hayas realizado y después implementarlos en otros proyectos, ademas Snippex soporta una gran variedad de lenguajes de programación para ser visualizados como HTML, CSS, Javascript, BASH / DOS, RUBY, SQL, XML, LISP, GO, Python, JAVA, C# y C/C++ Pueden utilizar la Demo del servicio directamente desde aqui o descargarlo para utilizar una versión local aca. Escrito por Alevsk
webintenta - blog de recursos y desarrollo web 5 presentaciones de Node.js En 5 presentaciones conoceremos algunas características, dificultades, el por qué y cuándo utilizar Node.js, el framework asincrónico de entrada y salida basado en JavaScript creado por Ryan Dahl. 1. Introducción a Node.js Grabriele Lana abarca el tema de Node.js explicando qué es y porqué elegirlo, algunas características, cuándo saber utilizarlo y enumera algunos aspectos negativos que son importantes tomar en cuenta. 2. Michael Bleigh presenta algunas de las razones por las cuales escoger Node.js, entre ellas el hecho de ser asincrónico y generalmente rápido. 3. Sabemos qué es Node.js pero Grant Goodale nos explica qué no es, qué podemos y deberíamos de construir con MongoDB y Node.js ya que ambos trabajan bien juntos porque “hablan Javascript, entienden documentos JSON y son increíblemente rápidos”. 4. Gabriele Lana nos introduce el tema de Node.js con un poco de humor utilizando a Bumble Bee para ejemplificar la forma de trabajar en Node.js. 5. Node.JS Node.JS en Mejorando.la
Principles of Color and the Color Wheel Add the right feeling and mood to your site using the color wheel, mix and match hues and create effective color schemes. The first color wheel has been around for more than 300 years and was developed by Sir Isaac Newton, according to ColourLovers. Other color charts, though, existed before that time. The basic design has evolved over time but the concept remains the same – almost any color combination from the wheel will work together. A basic color wheel features 12 colors that can be combined in a variety of ways to create a number of different effects. Expanded color wheels build on this design and add equal variants of color around the wheel. Types of Color The basic principle of the color wheel starts with three primary colors – red, yellow and blue. Secondary colors are made by mixing two primary colors from the color wheel. The last group of hues, tertiary colors, is made from mixing a primary and secondary color. Complementary Color Scheme Analogous Color Scheme More Color Schemes