Prof. Raoni's Design, Art & Game Works

Prof. Raoni Aldrich Dorim - raoni.dorim@fumec.br

Olá, sou o Professor Raoni.
Bacharel em artes plásticas pela UFMG,
Pós Graduado em Design de Jogos pela
PUC-MG. Sócio fundador da desenvolvedora
de jogos independentes: Mopix Games,
situada em Belo Horizonte e músico.

Conheça meus trabalhos:
Desenhos e pintura.
Uma forma de me expressar através das cores…

* Drawings with pencil.

* Watercolour.

*Paint on canvas

*Watercolours.

Desenhos...
Nunca parei de desenhar, desde a minha infãncia.

* Character design for e-learning courses. [Bosch]

* Character design for e-learning courses. [FIAT]

* Illustrations for e-learning courses. [COKE]

* Illustration for e-learning courses. [Telemig Celular]

* Illustrations for e-learning courses. [Telemig Celular]

* Characters design for e-learning courses. [Telemig Celular]

* Character design for e-learning courses. [Nestlé]

* Character design for e-learning courses. [Todeschini]

* Character design for e-learning courses. [AVON]

Design de interação
Clicando e se divertindo…

* Interaction design interfaces.

Game design
Gosto de jogar… Mas quando não estou jogando, estou
fazendo jogos.

* Quiz and racing game for fuel station´s workers. [Esso]

* Mine operation board concept. [Devex]

* Virtual reality environment for mine management application. [VALE]

* Ipad interface and usabity improve to a mine manager aplication. [Carajás Mine - VALE]

* Ipad icons showing diferent actions of the fleet. [Carajás Mine - VALE]

* Interface and usability design to SmartMineUG (mine management aplication) [AngloGoldAshanti]

* Interface design of a portable device for underground mining articulated truck. [Anglo Gold Ashanti]

Modelagem 3D e animação
As possibilidades são tantas. Tanta coisa pra construir…

* Control room concept for mining operations. [VALE]

* Dump truck modeled to a serios game with two diferent resolutions. [VALE]

* Wacky Race, angry mob car 3D model.

* Boomerang Bicycle Concept design, 3D modeling and composite.

* Linea car model for game cinematics [FIAT]

Personágens 3D
Criar personágens é como brincar de massinha.

* Rice and Beans as villains.

* Beetle modeled to game simulation in graduate school.

* Cartoon characters models using low poly technics.

* 3D Superman.

* Character design for advertising campaign [Manaus City Councilman]

* Different characters made using the same 3D mesh.

* Characters design for e-learning courses. [FIAT]

Somos um estúdio de jogos independentes com 6 integrantes
situado em Belo Horizonte.
Raoni-CEO Alê-DEVMarcelo-MKT
Desenvolvendojogossimplesedivertidos
Somos um estúdio de jogos
independentes com 6 integrantes
situado em Belo Horizonte.
facebook.com/mopixgames
mopix.com.br

Nosso primeiro jogo é um clicker de piratas
zumbis voadores. Lançado em junho de
2014 e teve 11mil jogadores.
Download IOS: https://goo.gl/ZXJtPv
Android: https://goo.gl/QWKhEe

Nosso projeto atual é o Magic Master, um Tower Defense único, financiado por fãs, na
plataforma Kickante (crowdfunding). Lançamento previsto: junho de 2016.
Campanha no Kickante: http://www.kickante.com.br/magicmaster.

Também sou um homem banda.
A música vem do coração e da prática intensa.

youtube.com/pixelmanband facebook.com/pixelmanband

Want to view more sample works?
Visit my website: www.mopix.com.br

Como serão nossas aulas?
Recheadas de conteúdo, mas para isso teremos que ter
assiduidade (Chamada toda aula) e ao final da disciplina
teremos feito, 4 trabalhos relacionados a animação, ilustração,
design e jogos.

Serei seu orientador neste curso, mas
para isso preciso conhecê-los melhor:
•  Me conte um pouco sobre a sua trajetória até chegar aqui.
•  Qual área você quer atuar dentro do mercado
•  Não se acanhe, somos colegas de profissão.

PROCESSAMENTO DIGITAL DE IMAGENS -
INTRODUÇÃO
Nesta disciplinas aprenderemos a os fundamentos da construção da
imagem bitmap e também o uso avançado da ferramenta ADOBE
PHOTOSHOP para o mercado de animação, design e jogos digitais.

Como serão nossas aulas?
Recheadas de conteúdo, mas para isso teremos que ter
assiduidade (Chamada toda aula) e ao final da disciplina
teremos feito, 3 trabalhos relacionados a design de jogos.

METODOLOGIA DE AVALIAÇÃO
Os trabalhos desta disciplina serão desenvolvidos de forma individual.

SIM! Você precisará de pelo menos 60XP...
Se quiser vencer o seu professor na avaliação final, é melhor começar a trabalhar
agora pois, você precisará desenvolver suas SKILL´s.
Pense no "Bruce Lee vs Chuck Noris" e no "Luke Skywalcker vs Dart Vader"
BOSS CHALENGE!

Mas se der tudo
certo...
Se der tudo certo e você vencer o
chefão final...
•  Parabéns! LEVEL UP. Pense em
tudo que você aprendeu e nos
futuros chefes que vai enfrentar.
E se der tudo errado e você for
reprovado...
•  Não fique triste. Nem sempre os
bons levam a melhor. Tente
novamente... INSERT COIN.

"Pensar nisto você deve..."
"A escolha, sua deve ser..." Master Yoda

O você vai ver nesta disciplina?
§  Conceito
§  O PIXEL e AS Escalas de cores
§  Tipos de arquivos BITMAP:
§  Bitmaps nos games – TEXTURIZAÇÃO
§  Ferramenta de autoria: Introdução ao Photoshop:
§  Interface
§  Visualização de variados tipos de imagens.
§  Ferramentas de transformação e seleção.
§  Ferramentas de pintura e correção de imagens.
§  Ajuste de cores
§  Recorte de objetos
§  Utilização de camadas.

O você vai ver nesta disciplina?
§  Utilização de Textos
§  Aplicação de Efeitos.
§  Criação de grids para character sheets.
§  Texturas
§  Tile Horizontal (x), Tile Vertical (y), Tile (x, y)
§  Técnicas de construção de Pixel Art e animação 2D.

TRABALHO #1 CONCEPT ART 35PTS
Utilize o photoshop para criar uma ou mais artes conceituais de
animação ou jogo criado por você. Você poderá recortar imagens de
personagens, fotos, paiságens e objetos encontrados na internet, ou
fazer uma pintura digital criando uma montagem do seu projeto. Utilize o
mínimo de 4 personagens e 2 imagens de fundo. Entregue no SINEF em
formato JPG com resolução de 1920x1080px.

TRABALHO #2 MERIDA CHALLENGE 10PTS
Lanço agora o Desafio da Merida. Recorte com precisão a personagem
da animação Valente das imagens abaixo e faça uma montagem com ela
em uma nova cena de maneira divertida, como se fosse a filme, jogo ou
série animada. Link de download das imagens:
www.dropbox.com/s/3iaafqsx0r46qvv/MeridaChallenge.zip

TRABALHO #3 TILE INFINITO E HORIZONTAL 10PTS
Utilizando as ferramentas offset e carimbo do photoshop crie as seguintes texturas,
comunmente utilizada na criação de animações 3D: Fundo de cenário com
repetição infinita na horizontal, como as imagens acima. Imagem de textura de
objetos com repetição infinita na horizontal e também na vertical. Entregar no
SINEF em formato JPG.

TRABALHO #4 ANIMAÇÃO PIXEL ART 35PTS
Utilize as técnicas aprendidas de pixel art para produzir as seguintes animações de
um personágem criado por você. Em espera, falando, caminhando, ação (Ex:
Ataque, ou pulo, ou esquiva, etc.). Entregue uma pasta ZIPADA no SINEF contendo
as suas animações. Salve suas animações como GIF animados utilizando as
dimensões máximas de 64x64px.

MESAS DIGITALIZADORAS
Incríveis ferramentas de desenho para mentes habilidosas.

Bamboo e Intuos Intuos Pro Cintiq
Bamboo Stylus Wacon Stylus Fine Line Ipad Pro + Apple Pen

O PIXEL E AS ESCALAS DE CORES
Diferenças entre CMYK, RGB e Pantone

PIXEL
Picture e Element, ou seja, elemento
de imagem, sendo Pix a abreviatura
em inglês para Picture).
”é o menor elemento num dispositivo
de exibição (como por exemplo
um monitor), ao qual é possível
atribuir-se uma cor.” De uma forma
mais simples, um pixel é o menor
ponto que forma uma imagem digital,
sendo que o conjunto de milhares de
pixels formam a imagem inteira.
Todo pixel tem uma cor predominante
pela fusão das cores luz, ou RGB.

RGB (Para displays e
monitores)
RGB é a sigla do sistema de cores
formado por Vermelho (Red), Verde
(Green) e Azul (Blue).
O propósito principal do sistema RGB
é a reprodução de cores em
dispositivos eletrônicos como
monitores de TV e computador,
“datashows”, scanners e câmeras
digitais, assim como na fotografia
tradicional.

CMYK (Para Impresso)
CMYKCMYK é a sigla do sistema de cores formado por Ciano (Cyan),
Magenta (Magenta), Amarelo (Yellow) e Preto (black).
A partir destas cores primárias Ciano, Magenta e Amarelo obtemos todas as
outras cores, porém só CMY não reproduz fielmente tons mais escuros,
sendo necessária a aplicação de preto.
CMYK é o sistema mais utilizado pelas gráficas para a produção de material
impresso: revistas, cartões de visita, panfletos, etc.

Pantone (Usado para impressão)
Pantone é um sistema de cores prontas, em muitos casos, apenas com a
mistura das quatro cores básicas (CMYK) não conseguimos obter a
tonalidade que desejamos. Pois, o CMYK tem uma limitação para
representar todas as cores que o olho humano consegue enxergar.

TIPOS DE ARQUIVOS
Vamos conhecer um pouco do uso e aplicação dos tipos de
arquivos mais comumente usados nos jogos. BMP, GIF, JPG,
PNG, TIFF, RAW, etc.

Arquivos: BMP
O formato BMP (ou Bitmap) é o
precursor. Ele armazena fotos e
gráficos em pequenos quadrados que
chamamos de pixels. Quanto maior o
número de pixels em uma só
fotografia, maior a qualidade da
imagem.
Isso resulta em arquivos de tamanhos
grandes demais para compartilhar na
internet e, por esta razão, surgem os
formatos de compressão, capazes de
diminuir o tamanho dos arquivos e
facilitar o envio e o recebimento de
dados.
Evite usá-lo para jogos!!!

GIF e suas animações
X
PNG e qualidade
GIF perde cada vez mais espaço para
o PNG. Este formato, mais novo,
também traz compressão de arquivos
sem perder qualidade, mas suporta
24-bit, ou seja, um número muito
maior de cores está disponível.

PNG X GIF
O PNG é o formato ideal para a internet e, também, para tirar screenshots
de sua Área de trabalho. Observe, abaixo, a diferença de qualidade ao
salvar a mesma imagem em PNG e GIF:

GIF e suas animações
X
PNG e qualidade
O GIF é muito utilizado,
principalmente para criar imagens
animadas. Esta extensão já foi muito
popular na internet e é uma das mais
antigas – que já foi motivo de muitas
brigas judiciais por conta de direitos
autorais.
Seu formato é 8-bit, o que significa
que imagens em GIF possuem
apenas 256 cores. Portanto, apesar
de ser um formato de compressão
que não implica em tanta perda de
qualidade quanto o JPG, ele traz
menos cores e pode distorcer as
imagens por conta disso.

JPG e fotografia
A extensão JPG é, sem dúvida, a
mais popular. Ela é gerada por
nossas câmeras digitais e pode ser
aberta em quase todos os programas
para edição de imagens. Além disso,
é o formato padrão para enviar
fotografias para redes sociais.
A grande característica do JPG é a
possibilidade de compressão.
Enquanto o BMP salva a imagem
pixel por pixel, o JPG é capaz de
gerar blocos de pixels e, portanto,
menos informação para armazenar.
JPG de alta qualidade
JPG de baixa qualidade

JPG e fotografia
O JPG é facilmente enviado por
email e mensageiros instantâneos.
Além disso, é ideal, também, para
armazenamento de arquivos sem
ocupar muito espaço na memória do
computador.
No lado negativo, o JPG representa
uma perda significativa de qualidade,
sempre que se comprime o arquivo.
Cada vez que você salva uma versão
de sua foto em JPG, novos blocos de
pixels são gerados e há perda de
qualidade, o que é inevitável.
JPG de alta qualidade
JPG de baixa qualidade

JPG e o RAW
Por esta razão, o JPG é indicado, principalmente, para armazenamento, e
não para edição de imagens. Fotógrafos profissionais costumam aderir à
extensão RAW (considerado o “negativo” da imagem digital) quando
precisam fazer edição de imagens, pois a qualidade é infinitamente superior
e não há perda de qualidade a cada edição.
Também é necessário lembrar que não há um caminho de volta: uma vez
criado o JPG ele não pode retornar ao BMP com a qualidade anterior. No
entanto, não se preocupe com todas as suas imagens em JPG. Este tipo de
arquivo ainda é o mais prático para compartilhamento e armazenamento de
suas fotografias. Além disso, um JPG de alta qualidade pode produzir
belíssimas impressões.

TIFF -Tagged Image File
Format
(para impresso)
Considerado por muitos como o
melhor formato de imagem de alta
qualidade para se trabalhar, o TIFF
utiliza compressão sem perdas, mas
é preciso lembrar que ele não
aumenta a qualidade
automaticamente. É necessário
utilizar o TIFF desde o começo, pois
abrir uma imagem em JPG e salvá-la
em TIFF não alterará absolutamente
nada.

Alguem sabe me dizer o que é uma
imagem em baixa resolução?
E o que é uma imagem em alta resolução?

BITMAPS NOS GAMES
COMO TEXTURAS
Vamos ver alguns exemplos e
aplicação de bitmaps nos games.

ALGUNS TIPOS DE
TEXTURAS PARA GAMES

Mapa de cor
Um tipo de destura que controla
apenas as cores do objeto 3D.

Mapas de textura com
relevo - Displace MAP
Um mapa de texura em preto e
branco onde o preto é um valor de
profundidade em relação ao plano da
textura. O branco é um valor de
relevo positivo em relação ao plano.

PIXEL ART
Vamos apren agora o que é pixel art, o que não é pixel art, como começar
a fazer pixel art e como melhorar o seu pixel art.

Nem toda imagem digital é pixel art.
Estas fotografias são feitas de pixels, mas não são Pixel Art:

De onde veio esta tal de
PIXEL ART?
É uma forma de arte digital na qual as
imagens são criadas ou editadas
dando destaque e contraste pixel.
Foi criada no início da era
computacional para representar
desenhos nos monitores com cores e
resolução limitada.
Shigeru_Miyamoto: Considerado por
muitos como pai da Pixel Art e
também pela criação jogos famosos
da Nintendo: Mario, Donkey Kong,
The Legend of Zelda, Star Fox, F-
Zero, Pikmin, entre outros.

Gostei desse negócio…
Por onde eu começo?
Assista tutoriais:
http://www.pixelprospector.com/the-
big-list-of-pixel-art-tutorials/
Comece pequeno: Quanto maior for a
imagem que você está tentando fazer,
mais tempo e trabalho que vai
demorar para completá-lo. Sugestão
64x64px.
Use uma palheta de cores limitada.
Se você não for capaz de fazer uma
boa arte com apenas 4 cores, usar 40
cores não vai ajudar. Concentrer-se
em onde colocar pixels e não nas
cores.

Mas como faço para
iniciar a imagem?
Bom, aí vai de cada um. Alguns
artistas preferem criar a arte de linha
(line art) primeiro, depois pinte e
adicione cor:
Programas comuns: Photoshop,
Grafx2, GraphicsGale, Pro Motion,
Pixen, and MS Paint.
Tipo de arquivo: Pelo amor de deus,
não salve suas imagens em JPG
porque ele vai destruir sua arte com
anti-alising. Adote o que todos atistas
usam: PNG ou GIF.

Como fazer linhas e
curvas com pixels?
Linhas curvas.
Para fazer uma linha ou circulo com
curvatura, certifique-se de que o
declínio ou a inclinação é consistente
durante todo o tempo.
Representando retas.
Isto parece muito fácil, mas com
pixels, desenhar linhas retas requer
um pouco de cuidado. O que nós
queremos evitar são "serrilhados" -
pequenas pausas na linha que fazem
a linha parecer desigual. Observe as
linhas com angulos diferentes.

Termos importantes:
Anti-aliasing é o método de fazer as
bordas recortadas (pixelizadas) de
uma imagem parecerem suaves. A
maioria dos programas já faz isso
automaticamente pra você
adicionando uma transição de cores
em degradê nas bordas dos
preenchimentos.
Dittering ou Ditter:
Trata-se de um arranjo de cores
utilizando padrões de pixels. Esta
técnica é utilizada para fazer uma
transição em degradê entre duas ou
mais cores.

Erros comuns…
Jaggies: ocorrem quando um pixel ou
um grupo de pixels estão fora do
lugar, interrompendo o fluxo natural e
fluido de uma linha. Os jaggies
ocorrem geralmente por causa de
uma técnica ruim de linhas.
Como corrigir jaggies?
Altere o comprimento das linhas e
busque uma contagem mais suave de
transição entre pixels.

Iluminação na Pixel Art.
Defina uma fonte de luz para o seu
desenho. Muitos desenhos animados
usam a mesma fonte de luz para todo
o desenho, assim todas as artes
geradas vão combinar perfeitamente.
No entanto a iluminação é importante
para determinar o clima emocional de
uma cena, que pode ser trágica,
alegre, serena, etc.

Pillow-shading:
Níveis de sombra
Sombreamento na pixel art é muito
específico e tem esta característica
de ser gradual. Areas bem
demarcadas de cores com cuvas
separando uma tonalidade de sombra
da outra.
É muito importante definir qual é o
ponto de origem da luz para fazer
com que todas as partes do desenho
recebam a mesma iluminação.
O estilo de iluminação pode revelar
diferentes materiais e texturas nas
formas. Lembre-se do dittering para
acrescentar texturas às cores.

A palheta de cores
Na pixel art você cria e organiza a sua
própria palheta de cores. Palhetas
organizadas por proximidade tonal
facilitam a navegação e agilizam o
processo de colorização.
Faça suas próprias cores e não use
cores prontas de software. Elas
normalmente são muito vívidas
(luminosas) e muito diferentes das
cores do mundo real.

HSV - Hue, Saturation,
and Luminescence
Hue = tonalidade ou matiz de uma
cor. Se uma cor é definida como azul,
vermelha, laranja, etc depende da sua
tonalidade.
Saturation = saturação: A saturação é
a intensidade de uma cor. Quanto
menor a saturação de cor, mais
acinzentada ou desbotada ela se
torna.
Luminescence = brilho ou
luminozidade. Quanto maior o seu
valor mais clara é a cor e quanto
menor mais escura cor.

A arte da simplificação.
Retratando detalhes pequenos,
eliminando o que não importa e
preservando apenas os detalhes
essenciais.
Repare que os personagens abaixo
não tem nem boca nem nariz.
Aqui, separamos os amadores dos
profissionais, pois na pixel art você
vai precisar de muita coragem para
eliminar detalhes com sabedoria. Por
isso a pixel arte tem que ser decidida,
pixel a pixel por escala de
importancia.

Amplamente utilizada nos
jogos 2D, a perspectiva
isometrica utiliza como
base em ângulos de 30º.
A arte isométrica oferece
uma vista superior em que
se percebe 3 planos
cartesianos dos objetos.
Arte isométrica.

Made by Raoni
THE END
raoni.dorim@fumec.br
www.mopix.com.br

Prof. Raoni's Design, Art & Game Works

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Prof. Raoni's Design, Art & Game Works

Semelhante a Prof. Raoni's Design, Art & Game Works (8)

Último

Último (9)

Prof. Raoni's Design, Art & Game Works