Skip to content

Tag: Pixelart

simple HTML5 animation: clouds over background

If you are reading this text, sorry, your browser don’t support HTML5 Canvas (or maybe I did something wrong).

Code:

var canvas;
var ctx;

var background;
var width = 300;
var height = 200;

var cloud;
var cloud_x;

function init() {
	canvas = document.getElementById("cloud_demo_canvas");
	width = canvas.width;
	height = canvas.height;
	ctx = canvas.getContext("2d");
	
	// init background 
	background = new Image();
	background.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/forest.png';
	
	// init cloud
	cloud = new Image();
	cloud.src = 'http://silveiraneto.net/wp-content/uploads/2011/06/cloud.png';
	cloud.onload = function(){
		cloud_x = -cloud.width;
	};
	
	return setInterval(main_loop, 10);
}

function update(){
	cloud_x += 0.3;
	if (cloud_x > width ) {
		cloud_x = -cloud.width;
	}
}

function draw() {
	ctx.drawImage(background,0,0);
	ctx.drawImage(cloud, cloud_x, 0);
}

function main_loop() {
	draw();
	update();
}

init();

HTML code:

Alternative text if browser don't support canvas.

Credits and notes:

bug invaders

Sem dúvida os post-its nos tornam mais ágeis e são indispensáveis para metodologias que fazem uso de dashboards como Scrum. Mas o que fazer com as toneladas de post-its que são gerados e descartados? E o impacto ambiental? E o meio ambiente? E as araras-azuis?

Eis minha intervenção artística no escritório. Bug Invaders (sugestão de nome do Diego “Diegão” Andrade), nada mais justo já que umas das funcionalidades dos post-its é manter um rastro dos bugs e issues em aberto.

  • Lixo é ressignificado em arte (ao menos por um período antes de virar lixo outra vez).
  • Deixa o ambiente mais divertido.
  • Pixel art! Foram gastos 48 pixels.
  • Nostalgia.

Pygame: Running Orcs

Here is a Pygame Sprite animation using the approach presented by Joe Wreschnig and Nicolas Crovatti. It’s not yet exactly what I need but is very suitable.

import pygame, random
from pygame.locals import *

class Char(pygame.sprite.Sprite):
	x,y = (100,0)
	def __init__(self, img, frames=1, modes=1, w=32, h=32, fps=3):
		pygame.sprite.Sprite.__init__(self)
		original_width, original_height = img.get_size()
		self._w = w
		self._h = h
		self._framelist = []
		for i in xrange(int(original_width/w)):
			self._framelist.append(img.subsurface((i*w,0,w,h)))
		self.image = self._framelist[0]		
		self._start = pygame.time.get_ticks()
		self._delay = 1000 / fps
		self._last_update = 0
		self._frame = 0
		self.update(pygame.time.get_ticks(), 100, 100)	

	def set_pos(self, x, y):
		self.x = x
		self.y = y

	def get_pos(self):
		return (self.x,self.y)

	def update(self, t, width, height):
		# postion
		self.y+=1
		if(self.y>width):
			self.x = random.randint(0,height-self._w)
			self.y = -self._h

		# animation
		if t - self._last_update > self._delay:
			self._frame += 1
			if self._frame >= len(self._framelist):
				self._frame = 0
			self.image = self._framelist[self._frame]
			self._last_update = t

SCREEN_W, SCREEN_H = (320, 320)

def main():
	pygame.init()
	screen = pygame.display.set_mode((SCREEN_W, SCREEN_H))
	background = pygame.image.load("field.png")
	img_orc = pygame.image.load("orc.png")
	orc = Char(img_orc, 4, 1, 32, 48)
	while pygame.event.poll().type != KEYDOWN:
		screen.blit(background, (0,0))
		screen.blit(orc.image,  orc.get_pos())
		orc.update(pygame.time.get_ticks(), SCREEN_W, SCREEN_H)
		pygame.display.update()
		pygame.time.delay(10)

if __name__ == '__main__': main()

Here is it working:

Uptade: I put this source and images at the OpenPixel project in Github

Palestra Pixel Art na Biblioteca Dolor Barreira

Este sábado (22 de Agosto) estarei na Biblioteca/Gibiteca Dolor Barrera para uma palestra sobre Pixel Art.

Horário: 10 am.
Local: Biblioteca Dolor Barreira, Avenida da Universidade, 2572. Fortaleza, Ceará.

nessa_running

O evento é gratuito e faz parte de uma programação semanal de palestras que acontecem no local. Vale a pena comparecer não só pela palestra mas também para conhecer a gibiteca que conta com um excelente acervo de gibis e mangas.

Confira também o blog e o twitter da gibiteca.

Atualizado: Fotos do evento no Flickr.

My Free Tileset, version 10

My laptop broke and I lose the newest versions of some of my drawing. Fortunately I had backups for most of them. I found out that I had not published the 10th version yet. Here it is.

pixelart free tileset version 10

As usual is just little improvements over the last version. This time I added some geography elements. It’s now possible to create little levels and simple island.

Pixel Flu!

I draw a pixel art pig for the free pixel art set. Wait! of course  I take care also drawing protective masks and a good crew of scientists with special suites for handling them.

suine flu