Desenvolvimento de Aplicativos para Dispositivos Mveis Seminrio Canvas API

Jeferson Barrile Tomazella Renan Faraco Teixeira

Introduo
Monitores e Displays: Rasters Double-buffering e VSync Cores
Codificao Alfa Bitmaps

Canvas API

Monitores e Displays: Rasters

Matriz de 2 dimenses (x-horizontal e y-vertical)
Origem canto superior esquerdo
x crescente para a direita, y para baixo

Cada clula da matriz um pixel

Um pixel tem 2 atributos: posio e cor

Fonte: Zechner 2011

Monitores e Displays: Rasters

VRAM memria de vdeo
Framebuffer: espao para guardar os pixels que sero mostrados na tela

Fonte: Zechner 2011

Monitores e Displays: Rasters

Relao: Display e VRAM
Endereo VRAM = x + y * (largura do raster) Processador grfico envia dados da VRAM para o Raster

Fonte: Zechner 2011

Double-buffering e VSync
Podem ocorrer problemas ao copiar o contedo da VRAM para o display
Mostrar contedo incompleto

Double-buffering ajuda a minimizar este problema, criando dois framebuffers: frontbuffer e backbuffer
O frontbuffer espelhado no display O contedo da VRAM copiado para o backbuffer Para mostrar a nova tela, troca-se os buffers

 Desenhar o prximo quadro no backbuffer Inverso dos ponteiros Repete

Fonte: Java Tutorials

Double-buffering e VSync
A troca de buffer pode ocorrer enquanto o processador grfico ainda est desenhando no bacbuffer VSync: Vertical Synchronization
Os buffers s so trocados aps o backbuffer estar pronto

Fonte: SimForums

Cores
Codificao: Padro RGB (Red, Blue, Green)
Intensidade de cada componente forma uma cor.
Ex: (R = 0.25, B = 0.5, G = 1.0) =

Codificar usando float (valores no intervalo 0.0 a 1.0)

Usa muita memria, 4 bytes por cor (considerando uma arquitetura de 32 bits). Isso da 12 bytes por pixel. Ento uma imagem de 1024x1024 pixels ocuparia 12 Megabytes

Fonte: Xamanismo

Cores
Inteiro sem sinal
1 byte por cor (intervalo de 0 a 255) Ex: (R = 63, B = 127, G = 255) = Desta maneira, um pixel ocuparia apenas 3 bytes, e a mesma imagem do exemplo anterior iria ocupar 3 Megabytes Ainda temos 224 = 16777216 cores (mais de 16 milhes de cores) RGB888 8 bits por pixel

Fonte: Xamanismo

Cores
RGB565
Um pixel utiliza 16 bits apenas 5 bits para o vermelho e 5 para o azul 6 bits para o verde este espectro de cor melhor visualizado pelo olho humano Formato pouco utilizado

Fonte: Xamanismo

Cores
Alpha transparncia
Extremamente utilizada em jogos (ex: personagens, nvoas, etc)

Fonte: Coisas da minha infncia

Cores
Alpha Blending
Misturar a imagem com o fundo

Fonte: Coisas da minha infncia

Fonte: Tahra Deviantart

Cores
Como codificar o alpha? RGB888 armazenado em um inteiro
Sobram 8 bits que no so utilizados para cores Usar esse espao para definir um alpha para o pixel ARGB8888 (Alpha, Red, Green, Blue, 8 bits cada), ocupando um inteiro de 32 bits

Cores

Para obtermos a cor final, so necessrios alguns clculos:

red = src.red * src.alpha + dst.red * (1 src.alpha) blue = src.green * src.alpha + dst.green * (1 src.alpha) green = src.blue * src.alpha + dst.blue * (1 src.alpha)

Fonte: Zechner 2011

Bitmaps

Um bitmap uma matriz de duas dimenses, assim como um raster

A origem tambm localizada no canto superior esquerdo x (horizontal) cresce para a direita, e y (vertical) para baixo Cada clula de um bitmap um pixel, com uma codificao de cores, assim como um raster Um bitmap pode ser copiado diretamente para um raster, ou at mesmo para outro bitmap

Canvas API
android.graphics
.Bitmap figura: criar, modificar, servir de buffer .BitmapFactory decodifica arquivos, cadeias de dados, etc, em bitmaps .Rect usado principalmente para pegar apenas um pedao de uma imagem .Paint estilo e cor para desenhar ou pintar em um canvas ou em um bitmap

Canvas API
android.graphics.Canvas
Gerenciador das chamadas para desenhos Pode sobrescrever uma View Transfere o que ser desenhado da fonte (Bitmap, Rect, caminho), para o destino (Bitmap), utilizando os estilos e cores de uma Paint Mtodos de desenho: onDraw(), drawRect(), drawBitmap(), drawBackground(), etc

Canvas API
class Desenhar extends View{ int vermelho = 0; public Desenhar(Context context) { super(context); } protected void onDraw(Canvas canvas){ canvas.drawRGB(vermelho++,0,0); invalidate(); }

}
public void onCreate(Bundle savedInstanceState){ super.onCreate(savedInstanceState); setContentView(new Desenhar(this)); }

Exemplo de como utilizar o Canvas, sobrescrevendo o View Sobrescrever contedo da Activity principal Fazer as importaes necessrias

Referencias

ZECHNER, M. Beginning Android Games. 2. ed. USA: Apress, 2011. 688 p. Android Developer: Disponvel em: http://developer.android.com/reference/android/graphics/package-summary.html, acessado em 02/03/2013 s 00:20. Java Tutorials. Disponvel em: http://docs.oracle.com/javase/tutorial/extra/fullscreen/doublebuf.html, acessado em 13/03/2013 s 13:10. SimForums. Disponvel em: http://www.simforums.com/forums/win-7-ati-no-vsync_topic32829_page2.html, acessado em 13/03/2013 s 13:25. Xamanismo. Disponvel em: http://www.xamanismo.com.br/Aldeia/SubAldeia1203623508It002, acessado em 13/03/2013 s 13:30.

Coisas da minha infncia. Disponvel em: http://www.coisasdaminhainfancia.com/2011/10/gasparzinho-1995.html, acessado em 13/03/2013 s 14:00.

Tahra Deviantart. Disponvel em: http://tahra.deviantart.com/, acessado em 13/03/2013 s 14:10.

Fim
Obrigado