Olá camaradas programadores!

Depois de dois longos meses, meu portfolio está pronto.

Escolhi como nome de portfolio: NightmareFolio, porque foi um "pesadelo" criá-lo.

Se você deseja apenas vê-lo, clique aqui.

Vou contar a história de como tive essa ideia, mas você pode ver esse spoiler:

Voltando ao início dessa ideia, chegamos num sonho, sim, um sonho.

Sonhei que estava num jogo, no qual havia um gato e um assassino (sim! alguém estava querendo matar um gato!!), o pior disso: eu era o gato! meow

Quando "fui morto" tornei-me o assassino.

Fiquei intrigado com o sonho.

De fato, estava jogando no meu sonho, e olha que até alí nunca tinha jogado Stray.

Contei para meus colegas de trabalho e eles me sugeriram criar um jogo em React JS.

No início foi uma brincadeira.

Mas comecei a estudar sobre o assunto e deparei-me com uma biblioteca chamada Enable3D, que faz um monte de abstrações do Three.JS.

O enable3d é inspirado nesse outro projeto, chamado Sketchbook, que virou um arquivo público no GitHub, ou seja, você pode fazer qualquer coisa, até mesmo vender o código, loco né?

Tudo massa até agora, massss e como faria os mapas? Nunca fui bom em desenhos...

Daí descobri o SketchFab, onde o pessoal disponibiliza inúmeros sketches for free, é claro, desde de que citados; ou, se você quiser fazer algo mais sério, pode comprar uma licença.

No meu caso, sempre foi apenas por diversão e para aprender algo novo (e olha como aprendi 😼)

Na primeira ideia peguei um gato estranho (mas de grátis).

Estava decidido a fazer como no sonho, mas pelo jeito você pode ver que não foi meu projeto final ＞﹏＜

Isso, pois é muito difícil animar ... ou eu não tenho tempo/paciência para isso

Para a maioria das animação é preciso "riggar" um personagem, por isso aquelas poses em T, como essa:

Ou seja, o RIG é o processo de adicionar um monte de pontos no personagem que, no final, passam a ideia de animação.

Nesse ponto, eu tinha a pose em T do gato e nem sabia o que RIG significava.

Com a ajuda do YouTube, vi que teria que usar o Blender para animar, oh tristeza.

Para nossa sorte, caros amigos, há uma ferramenta que faz o rig gratuito.

. . . rufem os tambores . . .

É o Mixamo da Adobe, há várias e várias animações, só basta ter a pose em T de um personagem em formato FBX (a maioria dos sketches vem em FBX ou é só converter no Blender):

Pronto!

Isso deve ter levado umas três semanas para eu descobrir e muitooos erros huehueu

Nesse momento, eu tinha o gato e uma ideia.

Tentei criar o meu próprio cenário no Blender.

É...

Nesse momento percebi que não tinha muita criatividade.

Criei um quarto e... OFM!

O que seria isso? out of memory ou... deu ruim rapazes!

Nesse instante, pensei: KISS ou keep it simple, stupid! (ou, como minha mãe diria, não dá o passo maior do que a calça, guri!)

Estava muito complexo e pesado.

Seria mais fácil copiar algo já feito e com mapas no SketchFab.

Jogo da cobrinha? Nhá

GTA? Muita mão

Mario 3d? Why not

E assim peguei o mapa desse carinha.

O maior problema era de o mapa ser muito largo, ou seja o Mario poderia burlar o sistema muito facilmente!

Então tive que voltar ao Blender e quebrar a cabeça pra cortar o chão (em JS seria bem mais fácil...)

Aliás, quando eu tive de passar as animações do arquivo do Mixamo para o Enable3d, perdi muito tempo tentando juntar as animações no Blender.

Como um bom programador faria, dei console.log em todos os objetos e types que o Enable3d disponibilizava.

Até que achei uma maneira de mesclar as animações (maior alegria que senti no dia haahahah)

Ótimo, agora pude criar o Mário num componente do React, meta de vida realizada.

Nesse momento, faltava adicionar colisões, ou seja, deveria ter o Goomba (bixinho fofinho - ou não - que tenta matar o mário).

Então quando o Mário bate no Goomba, ele aprende a voar.

Ótimo, mas tá faltando algo...

Sim, um nível do React!

O React, meu melhor amigo, mas por que não transformá-lo num vilão!

Então criei uma fase inicial, para o usuário escolher entre qual game quer jogar (primeira imagem do post).

E depois me baseei num exemplo do Enable3d para tiros em primeira pessoa. (recomendo ir jogar isso clique aqui

Você pode derrotar o React, mas ele chega seus amigos haahh (sem spoiler aqui, vai jogar).

Estamos quase no final, mas faltava alguma coisa no Mário, sim!

moedas e pontos

Então adicionei um sistema de detecção de pontos e estrelas.

E agora tô morrendo de sono mas não paro de escreve aqui hahah

Conclusão

Foi algo divertido, sobretudo, aprender novas coisas e me desafiar.

Tenho certeza que sou um dev muito melhor depois desse projeto.

Não está perfeito, há muiiitas coisas para melhorar, mas, às vezes, é necessário saber a hora de parar.

Vou continuar atualizando ele? Sim, paulatinamente, mas sim.

Uma das coisas que me irrita, é que no deploy, ele fica bem mais lento do que no local, algum dia, tenho que migrar do vercel free para a aws, mas deixo isso para o meu eu do futuro heheh.

dá uma estrelinha no meu projetinho se leste até o finalzinho?

https://github.com/gabrieldeavila/nightmare-folio

thank you sir!