Desde hace algunas semanas he comenzado a escribir un par de tutoriales sobre desarrollo de videojuegos utilizando javascript y canvas de html5.

El primero trata de como hacer animaciones utilizando sprite sheet.
http://shin.cl/blog/?p=139

El segundo trata de como hacer tilemaps scrolleable:
http://shin.cl/blog/?p=153

El tercero es una extensión del segundo donde agrego zoom In/Out, detección de colisiones, separación de objeto que chocan y agregar mas de 1 viewport.
http://shin.cl/blog/?p=166

El cuarto trata sobre la detección de colisiones en base a pixeles.
http://shin.cl/blog/?p=181

El quinto y último que he escrito trata sobre simulación de luz sobre un tilemap utilizando ray casting.
http://shin.cl/blog/?p=195

Ojalá les sirva

Saludos!

Seria ademas bueno que el usuario pudiera renombrar los layers y quizás un pick para seleccionar un color en el lienzo.

Saludos!

Estoy trabajando en una nueva versión, re escribiendo  y re estructurando todo de una mejor forma. En la nueva versión las capas tendrán un id  personal el cual podrá ser modificado. Actualmente tengo implementado el zoom in/out crear lienzos de diferentes tamaños.

Sobre el pick de color en el lienzo, eso ya está. Tienes que apretar la tecla I + boton izq del mouse para seleccionar el color del canvas.

Saludos.

Hola, quería presentarles mi proyecto de tiempo libre. Lo programé hoy en la tarde así que aún tiene muchos bugs.

PixelPush está apuntando  a la gente que gusta de trabajar haciendo pixel-art por ende todas las herramientas que incluye y va a incluir apuntan a facilitar el trabajo de este.

Por ahora es una simple app para dibujar con selección de colores de una paleta y un sistema básico de capas.



Acá hay algo de info/bugs/futuras ideas sobre la herramienta:

Cosas que funcionan:
- Un sistema básico de Capas // Agregar/Quitar/Borrar
- Selección de colores de la paleta y el canvas.
- Rellenar y Borrar áreas de color seleccionado.
- Generar una imagen que puede ser guarda.
- Preview.
- Undo con CTRL-Z. Hasta 100 undos.

Cosas que no funcionan bien:

- Si cambias de capa se borra el historial de undos.
- Si seleccionas un color del canvas solo elige un color de la capa activa.
- La paleta de colores es un asco.
- Rellenar y Borrar áreas es bastante lento y buggeado.
- No se puede cambiar el tamaño del canvas.
- Solo "funciona" en Chrome.
- Otras cosas que ya ni recuerdo.

Cosas que agregaré en una proxima actualización

- Sistema de capas mucho mas complejo [ Alpha/Visibilidad/Mover arriba o abajo/Imagen de muestra/mas.
- Un botón de guardar imagen directamente.
- Cambiar el tamaño del canvas.
- Zoom in/out.
- Frames para crear animaciones.
- Guardar GIF animados.
- Guardar animaciones como Sprite Sheet.
- Mejor sistema de paleta de colores.
- Mas brushes.
- Mejorar el rendering.
- Lineas rectas/Rectángulos/Circulos.
- Colores con alpha.
- Cargar imagen del PC.
- Cargar image de URL.
- Muchos mas, espero.

Pueden probar la herramienta acá:  http://shin.cl/pix/

Suena genial la idea, pero no sería mejor poder ocupar twitter como una fuente de información, en vez de tener que registrarte en otra red social mas para leer noticias. Algo como poder re-retwittear a tu comunidad y ahí se pueda colocar donde ocurre la noticia.

Precios del iPhone 5 liberado:

16GB = US$ 649
32GB = US$ 749
64GB = US$ 849

Creo que esperaré  a que bajen a unos USD300  ...

Si no pudiste solucionar el problema o aun utilizas pubnub, acá hice un ejemplo de chat utilizando websocket y as3 para un server.


Puedes descargarlo acá:
https://t.co/waolmsvQ

El problema es que as3 requiere de eventos y funciones  que manejen esos eventos.
acá va un ejemplo:


package  
{

/**

 * ...

 * @author Felipe Alfonso

 */

 import flash.display.Sprite;

 import flash.events.ProgressEvent;

 import flash.events.SecurityErrorEvent;

 import flash.net.Socket;

 import flash.events.IOErrorEvent;

 import flash.events.Event;

 import flash.system.Security;

 

 [SWF(width="640",height="480",backgroundColor="#000000")]

public class Main extends Sprite

{

public var socket:Socket;

public var host:String;

public var port:int;

public function Main() 

{

host = "tuhost";//tu host

port = 123456;//tu puerto

Security.loadPolicyFile("xmlsocket://"+host+":"+port);//Para evitar problemas de seguridad cuando probemos en una web.

socket = new Socket();

//Eventos que hay que escuchar.

socket.addEventListener(Event.CONNECT, onConnect);

socket.addEventListener(Event.CLOSE, onClose);

socket.addEventListener(IOErrorEvent.IO_ERROR, onIOError);

socket.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecError);

try

{

socket.connect(host, port);//Intentamos conectar

}

catch(e:Error)

{

trace("No se pudo conectar. Error: " + e.message);//Si no conecta nos tira un mensaje de error.

}

}

public function onSecError(e:SecurityErrorEvent):void

{

trace("No hay conexión. Error: " + e.text);//Por si existe un error de seguridad.

}

public function onConnect(e:Event):void

{

//Esto significa que el claiente a logrado conectarse al servidor.

socket.removeEventListener(Event.CONNECT, onConnect);

socket.addEventListener(ProgressEvent.SOCKET_DATA, onData);//Comenzamos a escuchar evento de transmición de datos.

trace("Cliente conectado a "+host+":"+port);

}

public function onClose(e:Event):void

{

socket.close();//Por si se cancela la conexión.

trace("Conexión perdida");

}

public function onIOError(e:IOErrorEvent):void

{

socket.close();

trace("No hay conexión. Error: " + e.text);//Por si existe un error de Output o Input.

}

public function onData(e:ProgressEvent):void

{

var msg:String = socket.readUTFBytes(socket.bytesAvailable);//Leemos nuestro dato si el evento es llamado.

trace(msg);//lo imprimimos en la consola.

}

public function send(msg:String):void

{

if (socket.connected)//Verificamos si esta conectado el socket.

{

socket.writeUTFBytes(msg);//Enviamos mensaje.

socket.flush();//Sirve para "tirar" todo dato acumulado en buffer.

}

}

public function exit():void

{

if (socket.connected) socket.close();//Cerramos conexión si existe alguna.

}

}

}


Saludos.