Resources

Amit Patel - Red Blob Games - MapGen 4

mapgen 4

Avevamo già parlato di Map Generation ma la nuova versione di MapGen di Red Blob Games merita una menzione particolare per la qualità dell'editing, del rendering e dell'export direttamente da browser.

E' possibile intervenire su tutti i dettagli della mappa, colori, montagne, fuiumi e acqua, dimensioni, stile ecc.

sito si parla anche di algoritmi A*, pathfinding, visibilità 2D, teoria dei grafi, probabilità, tracciamento di linee in pixel art, strade curve e molto altro.

github
Amit Patel

Hexagonal Grids
Grid parts and relationships
Grid edges
Line drawing on a grid

[via]

La Storia in un Diagramma

categorie

histography


Su histography.io ogni evento storico è un punto in un diagramma che si estende 14 miliardi di anni, con un focus particolare negli ultimi 25.000. Copre dal Big Bang fino al 2015. Si può osservare un determinato periodo, da una decade ad un milione di anni, e verificare cosa sia successo a colpo d'occhio. Gli eventi sono classificati per tipo.

Oltre ad essere bello da vedere ed elegante, è particolarmente utile per avere un senso della storia e approfondirlo a piacere.

About


Troubleshooting - Tecniche di risoluzione dei problemi

Think Like a Programmer, by Spraul, V. Anton.
In questo articolo: Tecniche di risoluzione dei problemi per evitare di urlare al computer, troviamo uno specchietto di punti per affrontare in modo efficace il problem solving.

1. Avere un piano
2. Riformulare il problema
3. Dividere il problema in parti
4. Iniziare da quello che si conosce
5. Ridurre il problema con dei vincoli
6. Trovare delle analogie
7. Sperimentare
8. Evitare la frustrazione

“Soffriamo più nella nostra mente che nella realtà.”

- Seneca

[via]

Samurai Bringer

Samurai Bringer

Samurai Bringer è un fantastico gioco che porta avanti la tecnologia di Dead Cells e riesce a raggiungere lo stato dell'arte nel 3D to 2D workflow della pixel art.

Tutti gli asset su schermo sono dotati di un tracciamento esterno (outline) ben definito, senza anti-aliasing e questo caratterizza molto l'immagine. Sicuramente Alphawing ha impiegato molto tempo per sviluppare il sistema di shader che dà vita al gioco.

Alphawing JP
twitter
youtube

[via]

★ Art Design Deep Dive: Using a 3D pipeline for 2D animation in Dead Cells

★ 3D Models to Pixel Art with Clean Automatic Outlines (with blend file)


<img> element

categorie

Picture perfect images with the modern <img> element

Picture perfect images with the modern <img> element ci spiega l'impatto di questo fondamentale elemento delle pagine web. Ci sono tre metriche di base delle quali tenere conto oggi:

Largest Contentful Paint:
- caricare in anticipo l'immagine più importante
- non sprecare pixel con immegini a risoluzione troppo alta
- lazy-load delle immagini fuori dalla pagina

Cumulative Layout Shift:
Per evitare fastidiosi spostamenti
- impostare le dimensioni corrette sulle immagini
- usare aspect-ratio nel CSS per riservare spazio

First Input Delay:
- evitare immegini che causano intasamento di rete mentre si caricano altri contenuti fondamentali: CSS e JS.

Molte di queste proprietà vengono preimpostate (baked) per default nei componenti coome Next.Js <Image> (React) e Nuxt Js (Vue)

[via]

Decisioni Migliori - Come Fare ?

categorie

decisions Alice

Top 10 ways to make better decisions ci racconta come affrontare il processo decisionale nel migliore dei modi:

1 Non temere le conseguenze
2 Seguire il proprio istinto
3 Considerare le proprie emozioni
4 Fare l'avvocato del diavolo
5 Tenere d'occhio la palla
6 Non piangere sul latte versato
7 Guardare la cosa da un altro punto di vista
8 Fare attenzione alla pressione sociale
9 Limitare le proprie opzioni
10 Fare scegliere a qualcun altro


Animazione 2D per i Giochi



In questo GDC Talk del 2021 Tyriq Plummer, autore di Catacomb Kids e al lavoro su UFO 50, si occupa di pixelart e animazione: 2D Animation for Games: A Primer

Principi:
11:45 Squash + Stretch; 13:51 Anticipation; 19:08 Timing; 21:41 Ease in, Ease out; 25:10 Arcs; 26:25 Follow-Through, Overlapping Action; 29:34 Exaggeration

Errori Comuni:
32:07 Too Many Frames; 35:27 Misuse of Smears; 38:15 Overanimating; 39:55 Thinking You Know Things; 42:10 Being Too Precious With Your Work; 43:36 Inconsistent size/mass

Altro:
47:01 Skeletal Animation; 52:35 Leverage Your Tools; 53:54 A Plea to the Engineers

twitter