Tutorial: criando uma room isométrica interativa no Spline Hana

Este tutorial documenta o processo usado para criar uma room isométrica estilo pixel art no Spline Hana, baseada em uma foto real do escritório, com animações, hotspots, cards interativos, linkroll, foto de viagem e exportação para pré-site.

Objetivo final: uma cena visual de portfólio, não um jogo. A room funciona como uma interface pessoal: cada objeto clicável abre uma informação sobre você.

1. Conceito do projeto

A ideia foi transformar uma foto real de um escritório em uma sala isométrica pixel art para servir como hero section de portfólio.

A sala representa áreas pessoais/profissionais:

A regra principal do projeto: cada animação precisa ter função narrativa. Nada de animar por animar.

2. Gerando a imagem da room

A imagem base foi criada no Spline Hana usando uma foto real como referência e o gerador de imagem do próprio ambiente.

Prompt usado como base

Transform the uploaded reference photo into a detailed isometric pixel art room, inspired by high-quality isometric pixel art rooms like Pixelera gallery.

Create a cozy personal portfolio room based directly on the reference image. Preserve the real layout and key elements from the photo: a compact attic-style office with a slanted ceiling, warm wooden floor, beige walls, two separate black desks, two black office chairs, multiple ultrawide monitors, a large monitor on the left desk, a second ultrawide monitor on the back desk, wall-mounted bookshelves full of books and media, tall shelving on the right side packed with books, comics, DVDs and collectibles, a small desk lamp with warm light, visible computer towers, cables, speakers, small gadgets, boxes, and personal objects.

Style: isometric pixel art diorama, 3/4 top-down view, fixed isometric camera, orthographic projection, cozy retro tech atmosphere, highly detailed but clean pixel readability, small scale miniature room, charming portfolio website hero image, handcrafted pixel art look, crisp edges, no blur, no photorealism.

Make the room feel like the workspace of a programmer, researcher, cinema lover, book collector and history enthusiast. Add subtle symbolic details without changing the real identity of the room: small code window on one monitor, tiny film clapperboard or camera item, books and graphic novels, research notes, a small map or history reference on the wall, warm desk lighting, relaxed late-night creative mood.

Important composition:
- Keep the attic/slanted ceiling feeling.
- Keep the two workstation areas.
- Keep the dense shelves and media collection.
- Keep the black desks and black chairs.
- Keep the warm wooden floor.
- Use a compact square isometric composition suitable for a portfolio homepage.
- Make objects recognizable at pixel-art scale.
- Use balanced lighting: warm lamp glow, cool monitor glow, cozy shadows.
- Leave a little empty space in the center/floor so the scene does not feel too cluttered.
- No people in the scene.

Output should look like a polished isometric pixel art room asset, not a screenshot, not a 3D render, not low-poly, not cartoon vector. It should feel like a lovingly crafted pixel art diorama based on the uploaded photo.

Negative prompt

Avoid photorealistic rendering, realistic 3D render, low-poly style, blurry image, smooth vector art, anime style, fisheye lens, first-person perspective, messy random objects, incorrect room layout, empty minimalist room, fantasy room, medieval room, cyberpunk exaggeration, neon overload, people, characters, pets, unreadable clutter, warped monitors, distorted bookshelves, incorrect perspective, camera tilted too low, front-facing room, flat 2D icon style, excessive bloom, text artifacts, fake readable text, logos, watermarks.

Critério de qualidade

A imagem gerada deveria preservar:

• dois setups de trabalho;
• monitores ultrawide;
• estantes cheias de livros/mídias;
• teto inclinado;
• luz quente;
• chão de madeira;
• clima de escritório pessoal real.

3. Entendendo o Hana

Este projeto foi feito no Spline Hana, não no editor 3D clássico do Spline.

Isso importa porque:

• no Hana, trabalhamos com frames, shapes 2D, imagens, textos, estados e interações;
• o export correto é feito por Frame, não pela cena 3D inteira;
• a imagem da room é uma imagem 2D/2.5D, não um conjunto de objetos 3D separados.

O Hana permite criar experiências 2D interativas com motion, estados e eventos. A documentação oficial descreve Hana como um canvas para criar designs interativos, exportar frames e compartilhar links públicos.

4. Estrutura inicial do projeto

A imagem gerada entrou como uma camada base:

Generated Image

Em cima dela foram criadas camadas de interação:

hotspots
cards
textos
ellipses/glows
fotos
linkroll

A lógica é simples:

Imagem da sala = cenário
Shapes invisíveis = botões/hotspots
Cards/textos = informações exibidas
Events/Actions = comportamento interativo

5. Criando hotspots

Um hotspot é apenas um retângulo invisível clicável colocado por cima de algum elemento da imagem.

Exemplo: hotspot sobre o monitor esquerdo.

Passos

1. Criar um Rectangle por cima do objeto.
2. Ajustar o tamanho para cobrir a área clicável.
3. Configurar:

Fill opacity: 0%
Stroke: off

1. Renomear a camada:

monitor esquerda
monitor direita
mapa
btn-site
btn-github
btn-linkedin
btn-contact

Durante a edição, pode-se deixar o Fill com 10% de opacidade só para enxergar o hotspot. Depois, volta para 0%.

6. Eventos principais usados

Foram usados três tipos principais de evento:

Regras práticas

Start = anima sozinho
Mouse Hover = destaque/interação visual
Mouse Down = clique, abrir card ou abrir link

7. Criando animação de hover nos monitores

Nos monitores, a função da animação é indicar que são clicáveis.

Estado normal

Fill opacity: 0%
Stroke: off

Estado hover

Fill: azul/ciano
Fill opacity: 8% a 12%
Stroke: azul claro
Stroke opacity: 35% a 50%

Evento

Mouse Hover
→ Action: Transition
→ Target: o próprio hotspot/monitor
→ State: hover
→ Duration: 0.25s a 0.30s
→ Ease Out ou Ease In Out

Esse efeito deixa o monitor com um glow discreto quando o usuário passa o mouse.

8. Criando glow da luminária

A luminária foi usada como animação ambiente.

Objeto usado

Um Ellipse amarelo transparente por cima da área da luz.

Base State

Fill: amarelo quente
Opacity: 5% a 8%
Size: menor

State glow

Opacity: 16% a 22%
Size: maior

Como em shapes 2D o campo pode aparecer como Shape → Size, o “scale” foi feito alterando W/H do objeto.

Evento

Start
→ Action: Transition
→ Target: Ellipse
→ Current → glow
→ Duration: 2.5s
→ Loop: Infinite
→ Cycle: Ping Pong

Resultado: a luz “respira” lentamente.

9. Criando o linkroll do monitor esquerdo

O monitor esquerdo virou uma seção de linkroll.

Conteúdo

./linkroll.sh
[01] website
[02] linkedin
[03] github
[04] contact

Estrutura de layers

linkroll-animation
├── btn-contact
├── btn-github
├── btn-linkedin
├── btn-site
├── roll
├── linkroll title
└── linkroll

Visual

• fundo escuro semitransparente;
• texto verde estilo terminal;
• fonte pixelada;
• bordas retas;
• nada de botão moderno arredondado.

Abrir o linkroll ao clicar no monitor

No objeto linkroll-animation, criar states:

Base State:
Opacity 0%

visible:
Opacity 100%

No hotspot Monitor Esquerda:

Mouse Down
→ Action: Transition
→ Target: linkroll-animation
→ State: visible
→ Mode: Toggle, se disponível

Importante: o target da action deve ser o card/linkroll, não o monitor. O monitor é o gatilho; o linkroll é o objeto que aparece.

10. Criando botões invisíveis no linkroll

Cada linha do linkroll recebeu um hotspot invisível.

Exemplo:

btn-site
btn-github
btn-linkedin
btn-contact

Configuração do hotspot:

Fill opacity: 0%
Stroke: off

Evento para abrir link:

Mouse Down
→ Action: Open Link
→ URL: endereço desejado
→ Target: New Tab

Email com mailto

Para o contato por email:

mailto:runawaydevil@pm.me

Com assunto:

mailto:runawaydevil@pm.me?subject=Contato%20pelo%20portfolio

11. Criando interação do mapa

O mapa na parede virou uma área para viagens/foto pessoal.

Ideia

Mapa → clique → abre uma foto minha viajando

Passos

1. Criar hotspot invisível sobre o mapa.
2. Criar/importar uma imagem pessoal.
3. Montar a foto como um card/polaroid.
4. Criar states no card da foto:

Base State:
Opacity 0%

visible:
Opacity 100%

1. No hotspot do mapa:

Mouse Down
→ Action: Transition
→ Target: foto/card
→ State: visible

A foto não deve ficar dentro do mapa minúsculo. O mapa funciona como gatilho; a foto aparece em um card maior.

12. Criando a seção “bio”

A luminária ou outro elemento da mesa pode abrir a bio.

Estrutura recomendada:

bio
├── card background
├── title
└── text

Evento sugerido:

Mouse Down no hotspot da luminária
→ Transition
→ Target: bio
→ State: visible

A bio deve ser curta. O objetivo é não transformar a room em currículo gigante.

13. Organização em Frame principal

Essa foi a etapa crítica para exportar.

No Hana, o export correto é feito por Frame.

Foi criado um frame chamado:

frameprincipal

A hierarquia ideal ficou assim:

Page
└── frameprincipal
    ├── linkroll-animation
    ├── foto
    ├── mapa
    ├── bio
    ├── Ellipse
    ├── Monitor Esquerda
    ├── monitor direita
    └── Generated Image

Regra importante:

Tudo que deve aparecer/exportar precisa estar dentro do frameprincipal.

Se uma animação aponta para um objeto fora do frame, pode funcionar no editor, mas falhar no export.

14. Problema encontrado: exportou só uma animação

Quando o export mostrou apenas a animação do mapa, o problema provável foi:

• algumas actions antigas ainda apontavam para objetos fora do frame;
• o frame foi criado depois das animações;
• os targets das transitions precisavam ser reatribuídos;
• o mapa funcionou porque foi criado dentro do frame ou estava com target correto.

Correção

Para cada interação antiga:

1. Selecionar o hotspot dentro do frameprincipal.
2. Abrir Events.
3. Abrir a Action Transition.
4. Conferir o Target.
5. Reescolher manualmente o target correto dentro do frameprincipal.
6. Testar em Play.
7. Exportar novamente.

Exemplo correto:

Monitor Esquerda
→ Mouse Down
→ Transition
→ Target: linkroll-animation
→ State: visible

Exemplo errado:

Monitor Esquerda
→ Mouse Down
→ Transition
→ Target: Monitor Esquerda
→ State: visible

O monitor é o gatilho. O linkroll é o alvo.

15. Exportação no Hana

Com frameprincipal selecionado:

Export
→ Embed Link
→ Export
→ Copy Iframe Embed

Opções recomendadas:

Logo: No, se o plano permitir
Page Scroll: Yes
BG Color: Hide
Frame Size: Contain

Quando usar cada opção

16. HTML mínimo para testar o iframe

Depois de copiar o iframe, criar um index.html:

<!doctype html>
<html lang="pt-BR">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Room Portfolio</title>
  <style>
    html, body {
      margin: 0;
      min-height: 100%;
      background: #000;
    }

    .hero {
      width: 100vw;
      height: 100vh;
      display: grid;
      place-items: center;
      overflow: hidden;
      background: #000;
    }

    iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }
  </style>
</head>
<body>
  <main class="hero">
    <!-- Cole aqui o iframe copiado do Hana -->
  </main>
</body>
</html>

17. Checklist final antes de publicar

Antes de considerar o MVP pronto, testar:

[ ] O frameprincipal contém todos os elementos.
[ ] Os hotspots estão invisíveis no estado normal.
[ ] Hover dos monitores funciona.
[ ] Luminária pulsa com Start event.
[ ] Monitor esquerdo abre linkroll.
[ ] Links do linkroll abrem corretamente.
[ ] mailto funciona no contato.
[ ] Mapa abre foto.
[ ] Cards não ficam gigantes em tela menor.
[ ] Export foi atualizado depois das alterações.
[ ] O iframe funciona fora do editor do Spline.

18. Fontes e referências oficiais

• Hana: conceito, frames e exportação: https://docs.spline.design/hana-a-canvas-for-interactivity/what-is-hana
• Designing in Hana: https://docs.spline.design/hana-a-canvas-for-interactivity/designing-in-hana
• Exporting in Hana: https://docs.spline.design/hana-a-canvas-for-interactivity/exporting-in-hana
• Events & Interactivity: https://docs.spline.design/interaction-states-events-and-actions/events-interactivity
• Mouse Hover Event: https://docs.spline.design/interaction-states-events-and-actions/events/mouse-hover-event
• Mouse Down Event: https://docs.spline.design/interaction-states-events-and-actions/events/mouse-down-event
• Transition Action: https://docs.spline.design/interaction-states-events-and-actions/actions/transition-action
• Open Link Action: https://docs.spline.design/interaction-states-events-and-actions/actions/open-link-action

19. Resumo brutalmente honesto

O projeto não precisa virar 3D real. A room funciona melhor como uma experiência Hana 2D/2.5D:

Imagem isométrica forte
+ hotspots invisíveis
+ cards pixelados
+ animações sutis
+ export por frame
= portfolio interativo viável

O erro a evitar é tentar transformar isso em jogo, engine 3D, editor ou mundo navegável. O MVP certo é pequeno: bonito, clicável, rápido e publicável.