Este tutorial do Photoshop orienta você no processo de criação de um sprite de pixel animado usando apenas algumas ferramentas básicas do Photoshop. Durante a lição, você se familiarizará com todas as técnicas básicas para criar esses trabalhos, que poderá aplicar em seus próprios projetos. Então vamos começar!
1. Prepare a tela e as ferramentas
Passo 1
Selecione a ferramenta Lápis. Será sua principal ferramenta para esta lição. Defina uma ponta de pincel redonda dura e aplique as seguintes configurações ao pincel. A linha criada com um lápis deve ser bem nítida.
Passo 2
Defina o Modo para: Lápis e aplique as configurações mostradas abaixo:
etapa 3
Ative a exibição da grade de pixels: View> Show> Pixel Grid (View> Show> Pixel Grid). Se este item de menu não for exibido, vá para o menu Editing\u003e Settings\u003e Performance (Preferences\u003e Performance) e marque a caixa Use GPU(aceleração gráfica).
Nota: A grade só ficará visível na tela recém-criada quando ampliada em 600% ou mais.
Passo 4
Agora vá para o menu Editing> Settings> Basic (Preferences> General), ou apenas pressione Control-K. Na lista suspensa Image Interpolation, selecione Nearest Neighbor. Dessa forma, você pode ter certeza de que as bordas do seu objeto permanecerão nítidas o suficiente.
Em seguida, vá para o menu Edição\u003e Configurações\u003e Unidades e Réguas (Preferências\u003e Unidades e Réguas), onde na lista suspensa Réguas (Réguas) selecione Pixels (Pixels) para ver todos os tamanhos em pixels.
2. Crie um Sprite
Passo 1
Agora que todo o trabalho preparatório foi concluído, você pode começar a criar o próprio Sprite. Esboce um personagem com uma silhueta facilmente reconhecível. Tente não se deixar levar pelos detalhes. Também não é necessário usar cores diferentes. O esboço deve apenas ajudá-lo a visualizar como seu personagem será. Para esta lição, escolhi um soldado espacial.
Passo 2
Ative Free Transform (Ctrl + T) e reduza a altura do seu personagem para 60px.
O tamanho do objeto é exibido no painel Informações. Observe que as configurações de interpolação devem ser exatamente as mesmas que usamos na etapa 4 da seção anterior. NO este caso isso não é tão crítico, pois estamos apenas convertendo o esboço para uma pixel art, mas no futuro, ao trabalhar em objetos pixelados, esses parâmetros devem ser controlados.
etapa 3
Amplie a imagem em cerca de 300-400%. Assim ficará mais claro. Abaixe a Opacidade da camada de esboço. Clique no ícone criar uma nova camada na parte inferior da paleta de camadas. Crie um esboço usando a ferramenta Lápis.
Se o seu personagem for simétrico, como o meu, basta desenhar apenas a metade, duplicá-lo e virá-lo horizontalmente: Edit> Transform> Flip Horizontal (Edit> Transform> Flip Horizontal).
Regra da periodicidade: tente quebrar formas complexas em vários elementos simples. O fato é que quando os pixels que formam uma linha são aplicados de acordo com um determinado sistema “periódico”, por exemplo: 1-2-3, ou 1-1-2-2-3-3, tal linha, diferentemente de uma um aleatório, é melhor percebido olho humano. No entanto, esta regra nem sempre é viável, e pode ser violada se a forma da linha que está sendo criada assim o exigir.
Passo 4
Quando o esboço estiver pronto, escolha a cor principal e pinte os elementos grandes. Faça isso em uma camada separada criada abaixo da camada de esboço.
Etapa 5
Suavizar parte interna esboço, tons variados.
Continue diversificando os tons. Como você pode ver, no processo de trabalho, corrigi a forma de alguns detalhes.
Etapa 6
Crie uma nova camada e coloque luz sobre ela.
Defina esta camada para Blending Mode – Overlap (Overlay). Com alguma cor clara, pinte sobre as superfícies nas quais você deseja impor luz. Desfoque as áreas com luz sobreposta indo no menu Filter> Blur> Blur (Filter> Blur> Blur).
Aqui eu virei a metade pintada horizontalmente, adicionei detalhes coloridos finais aqui e ali, e então mesclei ambas as camadas.
Etapa 7
Nosso personagem carece de contraste. Vá até o menu Imagem> Correção> Níveis (Imagem> Ajustes> Níveis), defina as configurações mostradas abaixo para corrigir os tons médios e, em seguida, use a correção do equilíbrio de cores: Imagem> Correção> Equilíbrio de cores (Image> Ajustes> Equilíbrio de cores) criando opções mais frias e mais quentes.
3. Animação Sprite
Passo 1
Crie uma cópia da camada: Layers> New> Copy to a new layer (Layer> New> Layer Via Copy), e mova 1 pixel para cima e 2 para a direita, usando a Move Tool (V) e as teclas correspondentes com Setas; flechas. Esta é uma fase chave ao animar um personagem ambulante.
Reduza a Opacidade da camada original para 50% para poder ver o quadro de animação anterior.
Passo 2
Agora vamos dobrar as pernas e os braços do Sprite, como se ele estivesse andando.
- realçar mão esquerda usando a ferramenta Lasso
- com a ajuda de Free Transform (Ctrl + A), e mantendo pressionada a tecla Ctrl, mova os pontos de ancoragem do container de transformação para que o braço fique um pouco abaixo do pescoço
- selecione a canela da perna direita e mova-a para baixo, como no primeiro quadro
- selecione a perna esquerda e puxe-a para cima - ela deve estar levemente dobrada
- com Lápis (Lápis) e Borracha (Ferramenta Borracha) redesenhe o cotovelo mão direita
etapa 3
Em seguida, temos que desenhar uma nova posição para os braços e pernas, assim como mostrei no passo 2. O fato é que transformar os braços e pernas muda a posição dos pixels, e as linhas perdem sua clareza anterior.
Passo 4
Faça uma cópia da segunda camada e vire-a horizontalmente. Assim você ficará em, no total, três posições: duas na fase de caminhada, uma na inicial. Aumente a Opacidade de todas as camadas novamente para 100%.
Etapa 5
Vá para o menu Window> Timeline (Window> Timeline), e clique no botão Create Frame Animation.
Faça os seguintes passos:
1. Defina o atraso do quadro: 0,15 segundos
2. Clique no botão para criar uma cópia dos quadros selecionados 3 vezes (3 cópias serão criadas)
3. Na lista suspensa com os parâmetros do ciclo, selecione a opção Sempre (Para sempre)
Etapa 6
Para selecionar corretamente a camada correta para cada quadro, clique no ícone de olho ao lado do nome da camada na paleta de camadas.
Então:
1 quadro: posição inicial
2 quadros: segunda camada
3º quadro: posição inicial novamente
4 quadros: terceira camada
Pressione a tecla Espaço para reproduzir a animação.
(animação finalizada com zoom de 100%)
Etapa 7
Salve seu trabalho. Vá para o menu Arquivo> Salvar para WEB (Arquivo> Salvar para Web), e selecione o formato GIF. Aumente o zoom para 300% e clique em Salvar.
A lição acabou!
Neste tutorial, você aprendeu como criar um personagem pixelado animado no Photoshop. Agora você já sabe como preparar a tela e as ferramentas necessárias, além de desenhar e animar o personagem usando o Lápis e a linha do tempo para isso. Espero que você tenha aprendido algo novo aqui e possa usar as técnicas descritas ao trabalhar em seus próprios projetos.
Parte 9: Criando sprites para jogos de luta
Então estamos trabalhando na criação de pequenos sprites 16x16: eles são simples, fofos e tradicionais para jogos de RPG de console. "Mas eu quero fazer um jogo de ação: algo com grandes sprites! Você sabe, algo como um jogo de luta da Capcom." Talvez por causa do desejo de desenhar sprites grandes e legais, você pulou as seções anteriores do tutorial e não criou sprites pequenos e elegantes. Se eu estiver certo, então volte e leia o que você perdeu. Embora o tamanho dos sprites tenha mudado, os princípios básicos descritos anteriormente permanecem válidos. Ok, vamos supor que você leu os capítulos anteriores e agora está realmente pronto para criar um sprite que vai "lutar".
Primeiro, deixe-me salientar que a técnica que estou prestes a descrever não é apenas para jogos de luta. Eu uso esse termo em todo lugar porque as poses e posições para os sprites de treinamento são diferentes posições de luta. Mas a técnica e os conceitos em si podem ser aplicados a diferentes tipos de jogos: Earthworm Jim provavelmente foi feito com a mesma abordagem. Aprenda com tudo o que puder e adapte o que aprender às suas necessidades. Mas vamos divagar, agora vamos dar uma olhada em alguns exemplos de Street Fighter Alpha 3.
Isso é realmente desenhado com habilidade. Cada personagem tem seu próprio visual único. Por exemplo, Zangrif é uma grande montanha de músculos, e Sakura é uma pequena e magra em comparação. Observe também a diferença significativa na largura dos sprites dos dois. Assim, os artistas não foram limitados por alguns tamanhos máximos de sprite. Sakura é um sprite 76x87, Zangrif é 116x111. Mas lembre-se de que 100 pixels de altura geralmente é considerado o tamanho padrão. A largura geralmente será menor.
O método usado pela Capcom é desconhecido. Eles não têm tutoriais ou outros esclarecimentos sobre o processo de criação de sprites, o que não é surpreendente, pois eles têm muitas outras coisas com que se preocupar. Eu consegui algumas informações, porém, analisando seus sprites e pegando trechos de informações úteis aqui e ali. Vejamos as fotos de Chun-Li de Street Fighter 3:
(Clique para ampliar)
Todos os quadros são desenhados à mão, então escaneados e digitalizados pixel por pixel. Talvez a Capcom tenha um programa especial que faça ray tracing. Como não temos esse programa, faremos tudo pixel por pixel. Isso é demorado. É difícil imaginar que os desenvolvedores de um jogo como SF3 lidaram com cada quadro dessa maneira. Mas, novamente, não tenho ideia de como eles fizeram isso, então as suposições são baseadas no que vemos. De qualquer forma, eles fizeram ray tracing - cada sprite é perfeito. A linha muscular tem um pixel de largura. Não há "manchas" de pixels (elas aparecem quando você desenha linhas com o mouse e sobrepõe o botão do mouse) e não há anti-aliasing nas linhas (geralmente isso acontece quando a imagem é reduzida ao tamanho de sprite necessário). Isso tudo significa que eles tiveram que corrigir tudo com canetas para obter sprites tão bons. Talvez as legendas japonesas nesta grande foto digam "Estas são as instruções para exatamente como desenhamos nossos sprites", mas eu não sei japonês. :)
A parte mais importante da pintura é o grande Chun-Li no canto superior direito. Observe a falta de detalhes nele. Quando você faz um sprite, você quer mostrar um certo número de recursos. Ao desenhar um pequeno rosto 8x8, não será possível exibir, por exemplo, as narinas, então por que perder tempo com elas ao desenhar no papel? Essas linhas curvas em suas roupas serão representadas por linhas amarelas de pixel único no sprite. Haverá uma pequena guarnição amarela pendurada nas roupas: mas só será adicionada na fase de trabalho de pixel. Portanto, no início, escolha um estilo simplificado para usar ao desenhar quadros de animação em papel.
Devo divagar e explicar que na verdade existem maneiras diferentes de criar sprites. A escolha do método depende apenas do nível de suas habilidades, habilidade e tamanho dos sprites criados. Se você está fazendo sprites de RPG 16x16, não há razão para desenhá-los primeiro no papel, escaneá-los, etc. Trabalhe imediatamente em pixels. Na ausência da habilidade de desenhar no papel, é mais sensato passar imediatamente para o desenho com pixels. Dois outros métodos aplicáveis na ausência de um scanner ou habilidades de desenho à mão livre:
À esquerda vemos uma silhueta. Um de regras básicas animação afirma que o espectador deve ser capaz de distinguir entre as ações do seu personagem, mesmo que ele seja mostrado em silhueta. No entanto, nos videogames, diferentemente da animação clássica, ângulos especiais são usados na criação de sprites animados, e isso também deve ser levado em consideração. Ainda assim, o princípio básico funciona com a mesma força, então a silhueta pode criar a base para futuros sprites. Ao desenhar cada quadro assim, você pode ter certeza de que a animação será agradável aos olhos. Uma silhueta é uma forma rápida e áspera para uma figura. É usado para ter uma ideia geral da postura, físico, etc. de um personagem.
À direita está um homem de esboço. O princípio é simples - a forma geral do sprite é esboçada, com linhas de membros, etc. Esse método tem a mesma finalidade da silhueta, mas pode ser usado para obter mais detalhes, como mostrar qual mão está na frente ou determinar a estrutura dos músculos. Este método, é claro, não é melhor que a silhueta: apenas a sua alternativa. Experimente e experimente até encontrar um método que funcione para você.
Neste tutorial, usarei o Photoshop 4.0, mas tentarei usar seus recursos mais simples. Ao falar sobre anti-aliasing e coisas assim, quero dizer que eles também são implementados em outros programas de desenho. E eu acho que você sabe como usar um deles. Ainda assim, deve-se notar que o Photoshop em geral não é adequado para criar sprites. O motivo é que o Photoshop modifica e organiza a paleta de uma maneira especial, o que não é adequado para criar jogos com uma determinada paleta. É porque esse tipo aplicativos são criados para processar fotos e ilustrações. A manipulação de paletas nesses casos não desempenha nenhum papel importante, ao contrário do caso dos sprites. Se você está fazendo um jogo que não usa uma paleta (que é a maioria dos jogos para PC, ao contrário dos consoles), e você não precisa se preocupar com o número de cores usadas, o Photoshop pode ser o caminho a percorrer . Eu gosto de usá-lo para praticar sprites de desenho, porque. você não precisa se preocupar em escolher cores, como seria o caso de um editor que usa uma paleta. Ok, vamos fazer um sprite. Para começar, eu uso uma imagem desenhada à mão, ou seja, Vou seguir o caminho da Capcom:
Desenhei o personagem à mão (em um quarto de papel A4 comum), colori e digitalizei (configurações - 300dpi, modo preto e branco): antes de reduzir o tamanho, você deve alterar o modo de imagem para RGB ou Tons de cinza para anti -aliasing para trabalhar). Acabei com uma imagem bastante grande, e aqui estou mostrando uma versão menor. Existem algumas pequenas imperfeições, como uma perna dianteira estranhamente curvada, etc.: elas precisarão ser corrigidas ao trabalhar com pixels, não será difícil. Observe que dobrei o contorno da jaqueta e da camisa. Saiu por acaso, pare: espere, eu ia mostrar a que problemas isso levaria. Ok, não podemos trabalhar com isso grande foto, então vamos reduzir o tamanho para 100px. Ela é desenhada em um fundo branco e terá um pouco menos de 100px no geral, já que deixei algum espaço vazio ao redor da forma caso eu queira alongar o cabelo dela. Ah sim, eu usei um filtro bilinear para downscaling. Além dele, o Photoshop possui mais dois filtros, cada um deles age de forma diferente:
(Clique para ampliar)
O filtro "Vizinho mais próximo" desativa completamente o anti-aliasing. Isso é especialmente útil se você precisar ampliar um sprite já concluído por um fator de quatro e mostrá-lo para pessoas que o entendam.
Os filtros "Bilinear" e "Bicúbico" fazem praticamente a mesma coisa: Bicúbico parece dar mais anti-aliasing. Nossa imagem é relativamente pequena, então não haverá muita diferença neste caso, mas se reduzirmos a imagem de 800px de altura, o efeito será significativo. O problema com o filtro bicúbico é muito anti-aliasing. Compare sua canela direita na foto bicúbica e na bilinear. O primeiro é mais desfocado. A mesma coisa aconteceu com a mão e o rosto. Isso pode interferir no ray tracing, então eu costumo usar um filtro bilinear para ficar menos anti-alisiano. Então temos nosso sprite (95px de altura):
O lado bom do Photoshop (e razão principal seu uso nesta técnica) é sua capacidade de trabalhar com camadas. Eles são necessários para o raytracing, você pode desenhar linhas sem tocar na imagem digitalizada original. Se o seu programa não suporta camadas, você pode dizer que está um pouco travado. Você pode ray trace no Photoshop e depois transferir o resultado para seu aplicativo nativo.
Dê uma olhada na parte inferior de sua camiseta, em uma versão menor da foto. Na versão desenhada à mão, havia contornos duplos neste local, com estes marquei o local para a cor branca que ia acrescentar. Na versão menor, é apenas uma mancha. O mesmo com a mão. É por isso que os detalhes das roupas de Chun-Li foram indicados por linhas finas, o resto dos desenvolvedores adicionados na fase de trabalho de pixel.
Aqui está uma maneira rápida de configurar o Photoshop para fazer um ray tracing simples. A imagem original será o plano de fundo (certifique-se de estar no modo RGB), então crie uma nova camada. Preencha-o com uma cor específica (por exemplo, azul). Defina esta camada para "tela" e você verá o sprite, apenas as linhas pretas ficam azuis. Em seguida, combine as camadas. Isso é necessário para que as linhas recém-desenhadas fiquem no topo da camada da imagem original. Agora crie outra camada e preencha com branco. Defina-o para o modo "multiplicar". Na verdade, o sprite irá desenhar apenas nesta camada. Você poderia apenas tornar a camada transparente, mas teria que alternar constantemente para a ferramenta "elástico" para apagar algo, o que obviamente é inconveniente. No nosso caso, o fundo será branco, mesmo que você não consiga vê-lo. Será fácil mudar de branco para preto (assumindo que a configuração inicial não foi alterada) pressionando o botão X. Se você deseja limpar a imagem feita de linhas azuis, altere o modo da última camada para "normal" e o fundo branco cobrirá a imagem original.
Usar um plano de fundo ao desenhar reduz significativamente o tempo de trabalho. No entanto, lembre-se de que o fundo está lá apenas para guiar sua mão. Normalmente o rosto fica embaçado, com pixels espalhados por todo o lugar, então você tem que recriá-lo com pixels. Você também pode consertar um pedaço maior do original (por exemplo, vou consertar a perna) se algo parecer ruim em pixels. Tente evitar grandes "manchas" de pixel como na mão dela, por exemplo. Esses pontos são perceptíveis nos cantos, bem, e em outros lugares. Tente se livrar deles. Um grupo de quatro pixels pretos pode prejudicar muito a percepção visual de um sprite. Para se livrar deles, você pode corrigir levemente a pose do personagem: por exemplo, se na imagem um braço e uma perna se sobrepõem e, como resultado da sobreposição, aparecem pontos de pixels pretos, você deve mover a perna ou o braço. Essas manchas, "bolhas", podem ser removidas na maioria dos casos. Nós continuamos:
Terminei o ray tracing das linhas em preto. Resta adicionar alguns detalhes e trabalhar o rosto, especialmente os olhos, mas isso é melhor feito já quando se trabalha com cores. Vamos começar a colorir o sprite, preenchendo suas áreas principais com cor, e não adicionando sombras neste estágio:
Então, adicionei cores: prefiro não trabalhar em um fundo branco, é melhor usar uma cor suave para isso. fundo branco, torna as cores mais escuras (especialmente a regata). Este é o truque que nossos olhos jogam conosco. Ok, vamos adicionar algumas sombras.
Eu tenho trabalhado fazendo ferramentas e mecanismos para artistas de jogos e efeitos visuais por mais de uma década, e sempre me perguntei por que as pessoas fazem a distinção entre "arte de software" e "arte de jogo real". Também notei que as pessoas que lhe dão a liberdade de pular gráficos ruins são principalmente outros programadores. Não importa quão divertido seja seu jogo ou quão incrível a demo seja tecnicamente, 'não programadores' para quem você mostra um personagem tão desenhado começam a pensar: "Ele está usando um jetpack ou talvez outra coisa?". Muitas vezes, você pode encontrar uma maneira de criar bons gráficos sem ter que desenhá-lo com ardósia limpa. Mas às vezes você precisa criar gráficos em tempo real. Restrições orçamentárias ou regras em uma competição de jogos, ou apenas tempo curto para um protótipo, pode ser necessário pegar uma régua e um pincel na mão.
Eu não sei desenhar, sério... quer dizer, olha isso:
Se é assim que seus gráficos se parecem, então este artigo é para você. Acho que gostaria de compartilhar uma série de dicas sobre como melhorar os gráficos. Essas dicas serão úteis para todos, independentemente da habilidade e experiência no desenho.
Embora dicas como "faça alguns esboços todos os dias" ou "visite um museu de arte" possam ser úteis para um artista iniciante, este artigo não é para um artista, trata-se de fazer as pessoas pensarem que você é um codificador, um programador, um hobby. matemática, têm alguma habilidade artística.
Além disso, nenhuma (quase) dessas dicas requer "prática", embora a prática seja útil e até essencial para um verdadeiro artista. Sempre parece que o prazo para um projeto chega ao amanhecer, e tudo que você precisa é de alguns desses sprites malditos.
Algumas dessas histórias também serão úteis para usuários do Photoshop, porque até onde eu sei, os mesmos conceitos se aplicam a qualquer programa de pintura, e existem operações semelhantes para tudo que eu mencionei aqui no Gimp, e provavelmente em qualquer outro. você está usando.
Parte do conteúdo também é direcionado aos concorrentes do LudumDare e outros concorrentes semelhantes, onde o objetivo é criar um jogo em tempo real em 48 horas. Meus jogos tendem a se sair bem na categoria de gráficos (infelizmente, o matador da jogabilidade continua me iludindo), mesmo que eu não me considere um artista de jogos particularmente bom. Muitos desses exemplos vêm dos meus registros de LD, e a maioria dessas experiências são coisas que aprendi entrando nessas competições e sendo forçado a criar arte em um prazo apertado. Além disso, eles devem ser inestimáveis para qualquer pessoa que tente criar gráficos de alta qualidade (ou algo próximo a eles) em um cronograma curto ou com um orçamento apertado.
O erro mais comum que vejo e o mais fácil de evitar. A paleta padrão para a maioria dos programas de desenho de computador remonta aos tempos do DOS (você consegue encontrar uma relação entre as cores nesta paleta e os valores binários de quatro bytes de 00 a 15? Claro que sim. Se você não conseguiu ver , você seria um verdadeiro artista.).
Não quero dizer com paleta uma paleta de 16 ou 256 cores VGA. Refiro-me apenas a um sistema coordenado para o seu jogo. Se você começar com uma paleta bem escolhida, seus "rabiscos" parecerão esteticamente agradáveis e até mesmo "design gráfico" pré-projetado.
Ok, um pouco de teoria das cores vai longe, e se você gastar quinze minutos pesquisando na internet o que é "teoria das cores", você estará na frente de uma definição do que é um jogo. Mas se você não tem tempo para isso, aqui estão algumas dicas que funcionam muito bem:
Para um grande jogo, você pode usar uma paleta diferente por nível ou área do mundo do jogo. Caso seus elementos de interface e personagem principal são representadas com cores neutras, ou se essas paletas compartilham uma cor principal comum, você pode aplicá-las igualmente entre níveis ou áreas.
Este exemplo usa uma paleta "monocromática" onde todas as cores são tons diferentes de um tom muito parecido, outros esquemas de cores são mais variados, mas o importante é que as cores fiquem bem juntas.
Talvez você seja uma pessoa muito legal para poder desenhar. Talvez tudo isso seja intencional. E aqui está. Em vez de fazer uma boa arte, escolha um tópico que exija arte ruim. Funcionou para "SketchFighter" e "Crayon Physics" desenhados em papel.
Use o que está disponível para você. Tem alguma besteira na sua mesa? Você pode ter feito um dos jogos de defesa de torre mais populares de todos os tempos.
As pessoas estão começando a entender o objetivo desse truque, mas ele tem alguns anos de vida. Seja criativo... talvez seus personagens sejam biscoitos e você possa literalmente assá-los. Ou algum bacon zumbi está atacando sua cozinha. Ou até mesmo um peito peludo que precisa ser raspado.
Círculo, Quadrado, Triângulo, Losango, Trapézio, Paralelogramo, etc. Você sabe calcular com precisão a área deles, mas sabe que desenhá-los é ruim? Esboce algumas formas à mão livre e adicione olhos (para um personagem) ou rodas (para veículos) ou qualquer outra coisa. Eles podem se tornar engraçados e ridículos, e completamente imprecisos.
Dependendo de quanto café você já bebeu, eles podem ser completamente Formas diferentes. Tudo está bem! Isso é bom, de fato, porque falhas e variações criam "personalidade" e as fazem ganhar vida. Não use ferramentas de forma em seu programa de pintura, é um destruidor de "alma de sprite". Ao tornar seus contornos distintos, você torna mais fácil para o jogador distingui-los visualmente.
Uma observação: não tente descobrir isso durante uma competição de redação de jogos. Teste tudo antes de conduzi-lo, para que você saiba exatamente o que fazer. Você gastará muito tempo, mas durante a competição pode levar apenas 15 a 20 minutos e fará uma grande diferença.
Além disso, não se apresse em fazer o "cozimento" até terminar as texturas dos modelos. Você não pode remover o "cozimento" ou fazê-lo duas vezes.
Mesmo que você não tenha aspirações de se tornar um artista de jogos, mas se você desenhar algum tipo de arte em um computador, precisará obter um tablet. Não necessariamente grande ou caro, você pode comprar um tablet Wacom. Porque desenhar com o mouse é como desenhar com tijolos no papel.
Muitas pessoas que conheço que compraram um tablet pela primeira vez não tiveram pressa em usá-lo. Aqui estão algumas dicas para ajudá-lo a tirar o máximo proveito do seu tablet.
Na era atual de interfaces baseadas em tela sensível ao toque, ter um tablet se torna benéfico para entender como os jogos baseados nessa tecnologia funcionam. Embora essa abordagem não seja diferente na comparação com a tecnologia de uso de um mouse.
Discurso de abertura:
Olá queridos usuários do site do portal! Neste artigo eu vou te dizer como desenhar seu sprite e fazer uma animação para ele em XNA Game Studio, além de apresentar o movimento dos sprites no espaço bidimensional. Todo o código abaixo é testado e funciona bem na versão 3.1 . Mas, também deve funcionar em outras versões ( 3.0 e 4.0 ; para a conta 2.0 não tenho certeza). Antes de se familiarizar com esta lição, recomendo a leitura, pois esta é uma continuação dela, o que significa que você precisará do conhecimento que recebeu do primeiro artigo.
Além disso, antes de ler esta lição, você deve ter conhecimento básico de uma linguagem de programação. C# e tem um programa Microsoft Visual C# Express a versão que você precisa (para XNA 3.1 - Microsoft Visual C# Express 2008, e para XNA 4. 0 - Microsoft Visual C# Express 2010) com biblioteca instalada XNA Game Studio.
Então, se você tem todos os itens acima, então vamos começar!
Parte 1. Desenhando um sprite.
Um pouco de teoria:
Primeiro, vamos entender o que é um sprite. Spriteé um determinado objeto (imagem) em um jogo 2D. Seu personagem, oponente, árvore normal ou plataforma são todos sprites. Até o fundo que desenhamos no artigo anterior será uma espécie de sprite.
Ou seja, como você provavelmente adivinhou, o princípio de desenhar sprites será semelhante ao princípio de desenhar um plano de fundo. Mas, neste artigo vamos melhorar a renderização dos sprites e criar nova classe.
Mas, há mais um ponto importante, que eu gostaria de considerar nesta seção do artigo. Para cada sprite, definiremos a posição na tela do monitor. Para fazer isso, existem duas maneiras (embora possa haver mais, mas apenas duas são usadas com mais frequência). Você pode simplesmente especificar a posição do canto superior esquerdo do sprite, ou pode desenhar um retângulo que cubra todo o sprite e definir suas coordenadas. Aqueles. para que onde quer que o retângulo se mova, o sprite o seguirá.
Cada um dos métodos tem seus prós e contras. Especificar a posição do canto de um sprite é mais fácil, mas especificar um retângulo é mais prático. No artigo, falaremos sobre essas duas maneiras de definir coordenadas. Para começar, vamos lidar com um método mais simples (definir as coordenadas do canto do sprite) e depois passar para um método mais complicado (criar um retângulo).
Então vamos começar!
Criando uma classe para desenhar um sprite:
Primeiro, vamos criar um novo projeto (como fazer isso foi descrito em detalhes no meu artigo anterior) e chamá-lo DrawSprite.
Agora clique com o botão direito do mouse no nome do projeto (no Solution Explorer) e selecione o comando: Adicionar -> Criar Elemento -> Classe:
Vamos chamá-lo duendes:
Uma vez criada, nossa classe fica assim:
200?"200px":""+(this.scrollHeight+5)+"px");">usando System;
usando System.Linq;
usando System.Text;
Namespace DrawSprite
{
Sprites de classe
{
}
}
Como você entende, esta é a classe mais padrão para um projeto em uma linguagem de programação. C#, ou seja namespaces XNA não há. Como não me lembro deles de cor (e, provavelmente, nenhum programador se lembra de todos), vamos adicioná-los "à medida que avançamos". Por exemplo, criamos uma variável para textura ( Textura2D, se alguém não se lembrar), e o compilador informa que está faltando um namespace (ele também escreve seu nome). É quando adicionamos.
Então, agora vamos lembrar como adicionamos nosso plano de fundo ao jogo.
Criamos variáveis para texturas, carregamos as próprias texturas no método Carregar conteúdo() e desenhou-os no método Empate(). Ou seja, para criar uma classe separada e desenhar um sprite nela (mais precisamente, processe o sprite nela, e vamos desenhá-lo em Jogo1), precisamos criar uma variável nela (em nossa nova classe), criar um método para carregar texturas (como o método Carregar conteúdo()) e crie um método para desenhar texturas (como o método Empate()).
Agora podemos começar a editar nossa nova classe. Como você sabe, todo código de classe é escrito em um bloco (entre chaves) da classe. Então logo depois:
200?"200px":""+(this.scrollHeight+5)+"px");">Sprites de classe
{
Vamos escrever:
200?"200px":""+(this.scrollHeight+5)+"px");">Texture2D
Como você pode ver, se você colocar o cursor em " Textura2D”, então o último caractere é sublinhado:
No nosso caso, isso significa que não há namespace suficiente. Pressione a combinação de teclas " Alt+Shift+F10 e escolha o primeiro. Será adicionado:
Se tudo for feito corretamente, a seguinte mensagem aparecerá na parte superior da tela:
200?"200px":""+(this.scrollHeight+5)+"px");">
MAS " Textura2D» mudará sua cor.
Então vamos continuar. Substituir " Textura2D" no:
200?"200px":""+(this.scrollHeight+5)+"px");">
Agora vamos criar um construtor. Não precisamos dele agora, vamos deixá-lo vazio:
200?"200px":""+(this.scrollHeight+5)+"px");">public Sprites()
{
A variável é criada, o construtor está pronto. Agora vamos passar para o upload da imagem. Vamos criar um método Carregar conteúdo() logo após o construtor. Em seus parâmetros, você precisa escrever dois objetos. Um objeto será de classe gestor de conteúdos(a propósito, o namespace também está faltando aqui, vamos adicioná-lo), e a segunda classe Corda. A primeira nos permitirá chamar o método carregar, para carregar uma imagem, e o segundo permitirá que você defina o caminho para esta imagem. E assim, é assim que o método se parece Carregar conteúdo():
200?"200px":""+(this.scrollHeight+5)+"px");">
{
spriteTexture = Content.Load
}
Como você pode ver, o sprite é carregado da mesma forma que o plano de fundo. Só, agora na aula Jogo1 Você só precisa digitar a palavra contente e o caminho para a textura. O resto já está escrito.
Então, agora vamos passar para o próximo (e final) método - Empate(). O único parâmetro que ele precisa passar é spriteBatch. Agora resta apenas desenhar o sprite da maneira que conhecemos (assim como desenhamos o fundo). A única coisa é que você não precisa chamar métodos aqui. spriteBatch.Begin() e spriteBatch.End(), pois para não chamar esses métodos para cada sprite separadamente, vamos chamá-los uma vez (na classe Jogo1). E assim, é assim que nosso método se parece Empate():
200?"200px":""+(this.scrollHeight+5)+"px");">
{
spriteBatch.Draw(spriteTexture, Color.White);
}
Como você pode ver, o segundo argumento (depois de spriteTextura) não gravamos. Isso é feito porque ainda não definimos as coordenadas.
E assim, agora nos voltamos para o problema que descrevi no início. Agora vamos usar o caminho mais fácil e definir as coordenadas do canto superior esquerdo do sprite. Para fazer isso, imediatamente após a linha
200?"200px":""+(this.scrollHeight+5)+"px");">public Texture2D spriteTexture;
(no início da aula)
Vamos escrever " Vector2” e adicione o namespace necessário. Também escrevemos o nome da posição:
200?"200px":""+(this.scrollHeight+5)+"px");">
E agora no método Empate() Vamos escrever o segundo argumento.
É assim que o método se parece agora Empate():
200?"200px":""+(this.scrollHeight+5)+"px");">public void Draw(SpriteBatch spriteBatch)
{
}
E é assim que nossa classe se parece:
200?"200px":""+(this.scrollHeight+5)+"px");">usando System;
usando System.Collections.Generic;
usando System.Linq;
usando System.Text;
usando Microsoft.Xna.Framework.Graphics;
usando Microsoft.Xna.Framework.Content;
usando Microsoft.Xna.Framework;
Namespace DrawSprite
{
Sprites de classe
{
public Texture2D spriteTexture;
public Vector2 spritePosition;
Sprites Públicos()
{
Public void LoadContent(ContentManager Content, String texture)
{
spriteTexture = Content.Load
}
Public void Draw(SpriteBatch spriteBatch)
{
spriteBatch.Draw(spriteTexture, spritePosition, Color.White);
}
}
}
Editando a classe Game1:
Então agora vamos editar a classe Jogo1 de acordo com a classe duendes.
Primeiro, vamos criar um objeto de classe duendes. Vamos chamá-lo herói.
200?"200px":""+(this.scrollHeight+5)+"px");">Sprites herói;
Agora no construtor Jogo1 inicialize o objeto:
200?"200px":""+(this.scrollHeight+5)+"px");">hero = new Sprites();
Depois disso no método Carregar conteúdo() vamos carregar a imagem. pré-pasta contente crie uma pasta Texturas e adicione uma imagem do seu herói a ele (tudo isso é descrito no meu primeiro artigo) (eu chamei parado). E assim, no método Carregar conteúdo() Escreva:
200?"200px":""+(this.scrollHeight+5)+"px");">hero.LoadContent(Content, "Textures//idle");
Assim, chamamos o método " Carregar conteúdo"da classe duendes e adicionar argumentos a ele.
Bem, estamos na linha de chegada. Resta ir para o método Empate() e ligue para lá spriteBatch.Begin(), herói. Empate e spriteBatch.End(). Como você entendeu herói. Empate vamos chamar da classe duendes, ou seja precisa apenas de um argumento - spriteBatch(o resto é escrito na classe duendes). É assim que o método se parece Empate() classe Jogo1:
Agora vamos começar o jogo F5) e veja o que obtemos. Recebi esta imagem:
Tudo funciona bem, mas código dado finalizar. Como não especificamos as coordenadas explicitamente, o compilador definiu as coordenadas padrão para o canto superior esquerdo do sprite. E essas coordenadas padrão são zero. Por que o sprite é desenhado no topo, você pergunta? Tudo é muito simples. Afinal, na computação gráfica, as coordenadas são invertidas. E se em matemática plano de coordenadas parece com isso:
Então na tela do monitor, como eu disse, as coordenadas são invertidas, ou seja, o sistema de coordenadas se origina no canto superior esquerdo:
Isso significa que as coordenadas ( 0, 0 ) (sobre X e S) estará no canto superior esquerdo.
Agora vamos mudar nosso código e anotar nossas coordenadas. Cada divisão da escala de coordenadas é igual a um pixel. Ou seja, se você tiver um tamanho de tela 600 x 600 pixels, em seguida, ponto 300 x 300 será o meio da sua tela.
Então vamos desenhar nosso sprite no centro da tela. Primeiro, vamos redimensionar a janela do jogo (isso é detalhado no meu primeiro artigo). Para fazer isso, no construtor de classe Jogo1 Escreva:
200?"200px":""+(this.scrollHeight+5)+"px");">graphics.PreferredBackBufferHeight = 600; //Largura da tela
graphics.PreferredBackBufferWidth = 600; // Altura da tela
É isso, agora podemos definir as coordenadas. No método Inicializar() digitar:
200?"200px":""+(this.scrollHeight+5)+"px");">hero.spritePosition = new Vector2(300, 300);
Assim, inicializamos o objeto spritePosição e atribuiu às suas coordenadas os valores 300 ao longo dos eixos X e S.
Agora vamos começar o jogo. Eu peguei assim:
Como você pode ver, o sprite não é desenhado exatamente no centro da tela, mas você pode ter certeza que seu canto superior esquerdo (aqui é transparente) é desenhado exatamente no centro. Assim, você pode experimentar e criar um herói exatamente no centro da janela do jogo. E assim, sobre isso vou completar esta parte do artigo. Na próxima parte, vamos descobrir como criar uma animação para o seu sprite.
Pixel Art é muito popular para jogos hoje em dia e há várias razões para isso!
Então, o que cativa a Pixel Art:
Então, você quer experimentar a Pixel Art? Então me acompanhe e eu vou te mostrar como fazer um personagem jogável simples, mas eficaz, que você pode usar em seu próprio jogo! Além disso, como bônus, veremos como integrá-lo aos jogos do iPhone!
Para um aprendizado bem-sucedido, você precisará do Adobe Photoshop. Se você não tiver, você pode baixar uma avaliação gratuita do site da Adobe ou torrent.
Antes de começarmos, vamos esclarecer o que é Pixel Art, não é tão óbvio quanto você imagina. A maneira mais fácil de definir o que é Pixel Art é especificar o que não é, a saber: tudo onde os pixels são criados automaticamente. aqui estão alguns exemplos:
Gradiente: Selecione duas cores e calcule a cor dos pixels entre elas. Parece legal, mas não é Pixel Art!
Ferramenta de desfoque: detectar pixels e replicá-los/editar para fazer uma nova versão da imagem anterior. Novamente, não é um gráfico de pixels.
Ferramenta de suavização(principalmente gerando novos pixels em cores diferentes para tornar algo "suave"). Você deve evitá-los!
Alguns dirão que mesmo as cores geradas automaticamente não são Pixel Art, pois exigem uma camada para efeitos de mesclagem (mistura de pixels entre duas camadas de acordo com um determinado algoritmo). Mas, como a maioria dos dispositivos atualmente lida com milhões de cores, essa afirmação pode ser ignorada. No entanto, usar um pequeno número de cores é uma boa prática em Pixel Art.
Outras ferramentas como (linha) ou ferramenta Balde de tinta(Paint Bucket) também gera pixels automaticamente, mas como você pode configurá-los para não suavizar a curva de pixels preenchidos, essas ferramentas são consideradas compatíveis com Pixel Art.
Assim, descobrimos que a Pixel Art requer muita atenção ao colocar cada pixel em um sprite, na maioria das vezes à mão e com uma paleta de cores limitada. Vamos trabalhar agora!
Antes de começar a criar seu primeiro recurso de Pixel Art, você deve saber que o Pixel Art não pode ser dimensionado. Se você tentar reduzi-lo, tudo ficará embaçado. Se você tentar escalá-lo, tudo parecerá aceitável desde que você use um escalonamento múltiplo de dois (mas, é claro, não haverá clareza).
Para evitar esse problema, você deve primeiro entender o tamanho do seu personagem do jogo, ou elemento do jogo, e depois começar a trabalhar. Na maioria das vezes, isso se baseia no tamanho da tela do dispositivo que você está segmentando e em quantos "pixels" você deseja ver.
Por exemplo, se você quer que seu jogo pareça duas vezes maior em um iPhone 3GS (“Sim, eu realmente quero dar ao meu jogo um visual retrô pixelado!”), que tem uma resolução de tela de 480x320 pixels, então você precisa trabalhar na metade da resolução neste caso será 240x160 pixels.
abrir Novo Documento Photoshop ( Arquivo → Novo…) e defina o tamanho para ser o tamanho da tela do jogo, depois selecione o tamanho do seu personagem.
Cada célula tem 32x32 pixels! Escolhi 32x32px não apenas porque é ótimo para o tamanho da tela que escolhi, mas também porque 32x32px também é um múltiplo de 2, o que é útil para motores de brinquedo (os tamanhos dos blocos geralmente são múltiplos de 2, as texturas se alinham). múltiplo de 2, etc.
Mesmo que o mecanismo que você está usando suporte qualquer tamanho de imagem, você sempre pode tentar trabalhar com um número par de pixels. Nesse caso, se a imagem precisar ser dimensionada, o tamanho será melhor dividido, resultando em um melhor desempenho.
Pixel Art é conhecido por ser nítido e fácil gráficos legíveis: você pode definir características faciais, olhos, cabelos, partes do corpo com vários pontos. No entanto, o tamanho da imagem complica a tarefa: quanto menor o seu personagem, mais difícil é desenhá-lo. Para abordar a tarefa de forma mais prática, escolha qual será o menor tamanho dos traços de caráter. Eu sempre escolho olhos porque eles são uma das melhores maneiras de dar vida a um personagem.
No Photoshop selecione ferramenta de lápis(Ferramenta Lápis). Se você não conseguir encontrá-lo, basta pressionar e segurar a ferramenta pincel(Ferramenta Brush) e você o verá imediatamente (deve ser o segundo da lista). Você só precisará redimensioná-lo para 1px (você pode clicar na barra de opções da ferramenta e redimensioná-lo, ou apenas manter pressionada a tecla [).
Também você vai precisar Apagar ferramenta(Ferramenta Eraser), então clique nele (ou pressione a tecla E) e altere suas configurações selecionando na lista suspensa Modo:(Modo:) Lápis(Lápis) (já que não há pontilhamento neste modo).
Agora vamos começar a pixelizar! Desenhe sobrancelhas e olhos como mostrado na imagem abaixo:
ei! Estou pixelizada!! Você já poderia começar com Lineart (onde o desenho é feito com linhas), mas uma forma mais prática é desenhar a silhueta de um personagem. A boa notícia é que você não precisa ser um profissional nesta fase, apenas tente imaginar as dimensões das partes do corpo (cabeça, corpo, braços, pernas) e a pose inicial do personagem. Tente fazer algo assim em cinza:
Você não precisa ser um profissional nesta fase Observe que também deixei algum espaço em branco. Você realmente não precisa preencher a tela inteira, deixe espaço para quadros futuros. Nesse caso, será muito útil manter o mesmo tamanho de tela para todos eles.
Depois de concluir a silhueta, é hora de . Agora você tem que ser mais cuidadoso com o posicionamento dos pixels, então não se preocupe com roupas, armaduras, etc. Para estar no lado seguro, você pode adicionar uma nova camada para nunca perder sua silhueta original.
Se você achar que a ferramenta Lápis é muito lenta para desenhar, você sempre pode usar (Ferramenta Linha), apenas lembre-se de que você não poderá posicionar pixels com a mesma precisão que faria com um lápis. Você precisará configurar como abaixo:
Selecionar pressionando e segurando Ferramenta retângulo(Ferramenta Retângulo)
Vá para o painel de opções da ferramenta, na lista suspensa Modo de ferramenta de seleção(Modo de desenho de contorno) selecione Pixel , altere Peso(Largura) por 1px (se ainda não tiver feito) e desmarque Anti-alias(Suavização). Veja como você deve ser:
Por favor, note que eu não fiz o contorno inferior para os pés. Isso é opcional, pois os pés não são uma parte tão importante das pernas para destacá-las, e você salva uma linha de pixels na tela.
Agora você está pronto para começar a colorir nosso personagem. Não se preocupe em escolher as cores certas, elas serão muito fáceis de mudar depois, apenas certifique-se de que cada uma tenha "sua própria cor". Use as cores padrão na guia Amostras(Janela → Amostras).
Pinte seu personagem como mostrado abaixo (mas fique à vontade para ser criativo e usar suas próprias cores!)
Uma boa cor contrastante melhora a legibilidade do seu ativo! Note que ainda não fiz nenhum esboço para as roupas ou o cabelo. Lembre-se sempre: salve o máximo de pixels possível de contornos desnecessários!
Não perca tempo pintando cada pixel. Para acelerar as coisas, use linhas para a mesma cor ou ferramenta Balde de tinta(Ferramenta Balde de Tinta) para preencher as lacunas. By the way, ele também terá que ser configurado. Selecionar ferramenta Balde de tinta na barra de ferramentas (ou apenas pressione a tecla G) e altere tolerância(Tolerância) para 0 e desmarque Anti-alias(Suavização).
Se você precisar usar Varinha mágica(Ferramenta varinha mágica) é uma ferramenta muito útil que seleciona todos os pixels com a mesma cor e configura da mesma forma que a ferramenta Paint Bucket - sem tolerância e anti-aliasing.
O próximo passo, que exigirá algum conhecimento de você, é clarear e sombrear. Se você não tem conhecimento de como mostrar luz e lados escuros, então abaixo eu lhe darei uma pequena instrução. Se você não tem tempo ou inclinação para aprender, pode pular este passo e ir para a seção Spice Up Your Palette, porque afinal, você pode apenas fazer seu sombreamento parecer com o meu exemplo!
Use a mesma fonte de luz para todo o ativo Tente dar os contornos como quiser/pode, pois depois disso o ativo começa a ficar mais interessante. Por exemplo, agora você pode ver o nariz, olhos carrancudos, mechas de cabelo, dobras nas calças, etc. Você também pode adicionar alguns pontos de luz, ficará ainda melhor:
Use a mesma fonte de luz ao sombrear E agora, como prometi, um pequeno guia de luz e sombras:
Muitas pessoas usam as cores padrão da paleta, mas como muitas pessoas usam essas cores, nós as vemos em muitos jogos.
Photoshop tem grande escolha cores na paleta padrão, mas não confie muito nela. É melhor criar suas próprias cores clicando na paleta principal na parte inferior da barra de ferramentas.
Em seguida, na janela Color Picker, navegue na barra lateral direita para selecionar uma cor e na área principal para selecionar o brilho desejado (mais claro ou mais escuro) e a saturação (mais suculenta ou mais opaca).
Depois de encontrar o caminho certo, clique em OK e reconfigurar a ferramenta Paint Bucket. Não se preocupe, você pode simplesmente desmarcar a caixa de seleção 'Contíguo' e quando você pintar com a nova cor, todos os novos pixels com a mesma cor de fundo também serão pintados.
Essa é outra razão pela qual é importante trabalhar com poucas cores e sempre usar a mesma cor para o mesmo elemento (camisa, cabelo, capacete, armadura, etc.). Mas não se esqueça de usar cores diferentes para outras áreas, caso contrário nosso desenho ficará muito colorido!
Desmarque "Contíguo" para preencher os pixels selecionados com a mesma corMude as cores se quiser e obtenha uma coloração de personagem mais glamourosa! Você pode até recolorir os contornos, apenas certifique-se de que eles se misturem bem com o plano de fundo.
Finalmente faça teste de cor background: crie uma nova camada abaixo do seu personagem e preencha-a com cores diferentes. Isso é necessário para garantir que seu personagem seja visível em fundos claros, escuros, quentes e frios.
Como você pode ver, desativei o anti-aliasing em todas as ferramentas que usei até agora. Não se esqueça de fazer isso também em outras ferramentas, por exemplo, Marquee Elíptico(Área de seleção oval) e Laço(Laço).
Com essas ferramentas, você pode redimensionar facilmente as peças selecionadas ou até mesmo girá-las. Para fazer isso, use qualquer ferramenta de seleção (ou pressione a tecla M) para selecionar uma área, clique com o botão direito e selecione Transformação Livre(Free Transform), ou apenas pressione Ctrl + T . Para alterar o tamanho da área selecionada, arraste uma das alças localizadas ao longo do perímetro do quadro de transformação. Para redimensionar a seleção mantendo a proporção, mantenha pressionada a tecla Shift e arraste uma das alças do canto.
No entanto, o Photoshop suaviza automaticamente tudo o que é editado com o Transformação Livre então antes de editar vá para Editar → Preferências → Geral(Ctrl + K) e altere interpolação de imagem(Interpolação de imagem) em Bairro mais próximo(Vizinho mais próximo). Em poucas palavras, em Bairro mais próximo a nova posição e tamanho são calculados de forma muito aproximada, não são aplicadas novas cores ou transparências e as cores escolhidas são mantidas.
Nesta seção, você aprenderá como integrar nossa pixel art em um jogo para iPhone usando a estrutura de jogo Cocos2d. Por que estou considerando apenas o iPhone? Porque, graças a uma série de artigos sobre Unity, (por exemplo:, ou Jogo no estilo de Jetpack Joyride em Unity 2D) você já sabe como trabalhar com eles no Unity, e de artigos sobre Crafty (Jogos de navegador: Snake) e Impact (Introdução à criação de jogos de navegador no Impact) você aprendeu como incorporá-los em uma tela e criar jogos de navegador.
Se você é novo no Cocos2D, ou no desenvolvimento do iPhone em geral, sugiro que comece com um dos tutoriais do Cocos2d e iPhone. Se você tem o Xcode e o Cocos2d instalados, continue lendo!
Criar um novo projeto iOS → cocos2d v2.x → modelo cocos2d iOS, nomeie-o como PixelArt e selecione iPhone como o dispositivo. Arraste a pixel art criada, por exemplo: sprite_final.png para o seu projeto e abra HelloWorldLayer.m e substitua o método de inicialização pelo seguinte:
-(id) init ( if((self=)) ( CCSprite * hero = ; hero.position = ccp(96, 96); hero.flipX = YES; ; ) return self; )
Posicionamos o sprite no lado esquerdo da tela e o giramos para que fique voltado para a direita. Compile, execute e então você verá seu sprite na tela:
No entanto, lembre-se, como discutimos anteriormente neste tutorial, queríamos aumentar artificialmente os pixels para que cada pixel fosse visivelmente diferente dos outros. Então adicione esta nova linha dentro do método de inicialização:
Escala do herói = 2,0;
Nada complicado, certo? Compile, execute e... espere, nosso sprite está embaçado!
Isso ocorre porque, por padrão, o Cocos2d nivela o desenho quando o dimensiona. Nós não precisamos disso, então adicione a seguinte linha:
Esta linha configura o Cocos2d para dimensionar imagens sem anti-aliasing, então nosso garoto ainda parece "pixelado" Compile, execute e... sim, funciona!
Observe os benefícios de usar gráficos Pixel Art - podemos usar uma imagem menor do que a exibida na tela, economizando muita memória de textura. Nem precisamos fazer imagens separadas para telas retina!
Espero que tenham gostado deste tutorial e aprendido um pouco mais sobre pixel art! Antes de partir, quero dar-lhe alguns conselhos:
Para um iniciante, Pixel Art parece ser o gráfico mais fácil de aprender, mas na verdade não é tão simples quanto parece. A melhor maneira para melhorar suas habilidades - é prática, prática, prática. Eu recomendo postar seu trabalho nos fóruns do Pixel Art para que outros artistas lhe dêem conselhos - é uma ótima maneira de melhorar sua técnica! Comece pequeno, pratique muito, obtenha retorno e você pode criar um jogo incrível que lhe trará muito dinheiro e alegria!
