Editor de jocs en MSX: ajuda número 4 (crear un sprite)

 En aquesta entrada mostrarem com crear sprites o animacions.

Haurem d'anar a l'editor, menú New Asset / Sprite

Un sprite en un MSX (ordinador de 8 bits dels anys 80) és un objecte gràfic independent que el maquinari pot dibuixar i moure sobre la pantalla de manera automàtica, sense haver de redibuixar-lo píxel a píxel a la memòria de vídeo.

👉 En altres paraules: és una petita imatge (per exemple, un personatge, una nau, una bala) que el xip gràfic del MSX gestiona com una unitat pròpia.

Per què eren importants?

Els sprites permetien fer jocs d’acció (com plataformes, shoot’em ups o arcade) de manera fluida, perquè el processador no havia de "repintar" cada moviment manualment: el xip gràfic ja s’encarregava de moure’ls i detectar col·lisions.

Poden tenir un o molt fotogrames o frames. En el nostre cas hem dibuitxat un personatge que camini
i que només tingui un sol color. Recordem que en poden tenir fins a 4 (vegeu la paleta Active Brush)

Podem definir-ne els colors a la part esquerra inferior.
A la part central hi ha l'espai de treball on dibuixarem el fotograma i a la part dreta hi ha les eines d'animació que tractarem més endavant.

Crearem un altre fotograma. Quan els fotogrames tenen pocs canvis entre ells, és preferible duplicar-los (Duplicate Frame) i modificar-ne les parts per estalviar-nos feina.

També podem modificar el fotograma i mitjançant els botons de fletxes, moure'l cap un costat o l'altre o crear un efecte mirall (Flip)

De totes maneres, l'editor mostra l'altre fotograma d'una manera transparent perquè en puguem veure l'evolució. Aquesta opció (opacity) es pot modificar. Per defecte és del 30%.

El nou fotograma tindrà aquest aspecte:

Fixeu-vos que se'n mostra una miniatura a la part inferior esquerra i que si volem podem ampliar-ho amb la barra del Grid Zoom. També en podem canviar la velocitat.

guerrera de dos fotogrames.

Ara canviarem de personatge i agafarem una guerrera que vaig crear fa unes setmanes. 
L'inserirem en una pantalla per veure com queda.
Podrem triar si volem que es mogui horitzontalment, verticalment o que estigui quieta.

Clicarem a Watch per veure com es mou.

Li podrem dir des de quines coordenades x i y volem que apareixi i si hi ha moviment i cap a on.

També podrem inserir-hi una pantalla de fons i triarem una evolució de la que vam fer en un exercici anterior.

Modificant les coordenades farem que aparegui just sobre d'un camí o plataforma.

I fins aquí l'ajuda bàsica de creació d'sprites. Continuarem en un altra entrada.



En Jordi Sala, el creador de l'editor, al minut 10 i 24 segons  ho explica més bé en aquest vídeo

Editor de jocs en MSX: ajuda número 3 (creant pantalles)

En aquesta entrada mostrarem com crear pantalles (screens)

Haurem d'anar a l'editor, menú New Asset / Screen Map

A la part esquerra hi ha els tiles i en seleccionarem una. 
Al centre hi ha l'àrea de treball o resultat de la pantalla.
A la dreta hi trobarem els botons de les accions possibles.

Començarem i seleccionarem una àrea i hi aplicarem la tile clicant sobre el botó Fill Selection.

L'editor omplirà tota l'àrea amb la tile seleccionada.

Repetirem l'acció fins a aconseguir la pantalla desitjada.
En aquest cas hi afegeixo una escultura o cara que indiqui l'inici del joc.

Seleccionarem un bosc d'avets.

Seleccionarem un terra ple de flors.

Hi afegirem un horitzó de muntanyes.

I finalment farem servir l'opció eliminar una àrea (clear selection) que el nostre protagonista haurà de saltar.

A la propera entrada ja parlarem de com crear sprites.

En aquest vídeo del creador de l'editor, Jordi Sala, comenta com crear pantalles, entre d'altres mòduls.

Editor de jocs en MSX: ajuda número 2 (ordenar, exportar i importar Tiles)

Aquesta és la segona part de l'ajuda número 1 (tiles)
Explicarem com ordenar, exportar i importar tiles.

Les tiles són l'element bàsic de la creació de les pantalles, per tant, és normal que se'n creïn moltes.
En el nostre cas, ara mateix en tenim 46 i encara no hem dissenyat gaires pantalles.
Per tant, caldrà tenir-les ben ordenades.

L'editor disposa d'un mètode d'ordenació (sort) alfabètic i també permet filtrar-les per lletra inicial.

En aquest cas les hem filtrat per la lletra "B"

Podem moure-les de projecte (importar / exportar) mitjançant el botó dret del ratolí fent Save i Load i ens generarà un fitxer .JSON al nostre ordinador amb el mateix nom de la tile.




Com importem una tile al nostre projecte?
Primer crearem una nova tile. Després la seleccionarem i clicarem a Load.
Escollirem el fitxer .json on prèviament hi hàgim guardat (save) la tile que vulguem importar i automàticament ja la tindrem a dins del projecte per a poder-la utilitzar en la creació de pantalles.

És a dir, això permet tenir una biblioteca de recursos de diferents tipus de fons com terres, totxanes, arbres, cels, etc. i així generar pantalles d'una manera molt més ràpida i eficient.


PANTALLES
Tot seguit mostrem un exemple del mòdul de pantalles (screen) que explicarem en una nova entrada.

En aquest vídeo del creador de l'editor, Jordi Sala, comenta com crear tiles, entre d'altres mòduls.

Editor de jocs en MSX: ajuda número 1 (Tiles)

M'he atrevit a fer una ajuda per explicar com fer servir l'editor que està desenvolupament en Jordi Sala i que trobareu una sèrie de vídeos explicatius en aquesta entrada

Començarem per un concepte bàsic, les Tiles o rajoles.


Què és un tile?

És un concepte clau en els videojocs antics (i també en alguns moderns).
Un "tile" (en català es podria dir rajola o fitxa) és un petit bloc gràfic —normalment quadrat, per exemple de 8x8 píxels a l’MSX— que es fa servir com a peça bàsica per construir l’escenari o els fons d’un videojoc.

En el cas de l'editor pot tenir diferents mides des de 8 a 32 píxels d'amplada i altura.
En MSX estan limitades a 2 colors per línia de 8 píxels (ja ho veurem més endavant)

Per a crear una Tile només hem d'anar al menú "New Asset" i escollir aquesta opció.

A continuació ens trobarem amb 3 blocs o àrees: 

1-Àrea de propietats
2-Area de treball
3-Atributs de color de línia

Comencem per la primera, Propietats generals

1A: aquí hi podem posar el nom que vulguem
A continuació escollirem la mida en píxels, des de 8 a 32 tant l'amplada com l'altura
1C: Accions
Ens permet copiar el contingut de la Tile i enganxar-la en una altra, dividar-la (split) i 
generar-la automàticament a partir d'elements pre-dissenyats (1A1) com són roques, totxanes, escales, barres de cel·la, gel, herba i herba estilitzada.

Cada element té els seus paràmetres específics. En aquest cas hem triat totxana (brick)
Podrem triar quants totxanes volem en horitzontal (brick W) i en altura (brick H) 1A2, també la mída en píxels del "morter" o separació entre totxanes 1A3, així com el desplaçament de fila (row offset).

Finalment generarem i aplicarem els canvis.

PROPIETATS LÒGIQUES
Les propietats lògiques indiquen què provoca o com es comporta aquella tile i s'exportaran al mapa de comportament.

No Solid (passable)
Solid (paret/ terra)
Platform (Top solid)
Slope (Solid) pendent

Banderes de propietat 
Indica si la tile és trencable, movible, mortal o interactiva.



ÀREA DE TREBALL

Trobarem diferents botons, com dibuixar (mitjançant el botó esquerra i el dret del ratolí),
emplenar àrea, dither (o efecte borrós o tremolat) i les operacions de fitxer 2A

A continuació, els botons que permeten moure el dibuix cap a un costat o l'altre, amunt i avall i les dues accions de mirall (mirall horitzontal i el vertical) 2B

Tot seguit, la barra de zoom que ens permetrà ampliar per a més tenir més detall i finalment les accions de simetria (hortizontal, vertical, D1, D2, Quad i desactivar)


ATRIBUTS DE LÍNIA DE COLOR

I acabarem explicant la darrera àrea que ens permet canviar els colors de primer pla (foreground FG) i el color de fons (background o BG) de cada línia de 8 píxels.

A partir del segon 40 fins al segon minuts d'aquest vídeo en veureu un exemple pràctic de les tiles. 

Desenvolupant un generador de jocs per a MSX

En Jordi Sala està desenvolupant un IDE o entorn integrat de desenvolupament 
per a jocs de MSX. Aquest entorn permet generar personatges, pantalles, mapa, etc
per a fer la vida més fàcil als programadors d'MSX.
Actualment es troba en fase Alfa.

Podeu veure'n els diferents vídeos que ha fet al seu canal de YouTube

A continuació els mostrem en ordre cronològic

1-MSX Retro Game IDE (sense música de fons)
25 de maig del 2025 (durada 3 minuts)

Creació de Tiles i el seu muntatge en una pantalla 

2-MSX Retro Game IDE 2 (amb música)
25 de maig del 2025 (3 minuts)

Com crear i editar Tiles i crear un mapa

3-Sprite Editor News! (amb música de fons)
26 de maig del 2026 (2 minuts)

Novetats de l'editor d'Sprites. Generació d'explosions.

El 4 es devia esborrar per algun motiu  i es passa directament al següent

5-MSX Retro Game IDE news 5 (amb música)
31 de maig del 2025 (3 minuts)

MSX Retro Game IDE news 5: Font Editor, Tile Bank.

6-MSX Retro game IDE news 6

7 de juny del 2025

El so, comencem amb un generador de sons amb els 3 canals del MSX.
I després comença la festa amb el Tracker per compondre. Gaudeixin-ho.

7-MSX RETRO GAME IDE, NEWS 7 (11 minuts)
17 de juny del 2025 (juntament amb el 8, per a mi, el millor vídeo)

L'autor explica els motius de la creació de l'interfície gràfica amigable per a realitzar gràfics, pantalles i sons passant per la compilació d'un joc per a MSX.

8-Mideas news 10/8/2025 (10 minuts amb explicacions del creador)
10 d'agost del 2025

Creador de jocs MSX, nom = Mideas, demo : seleccion de zones, copiar, enganxar. Generador de Tiles: Brick, Rock, Ladders. Demo: Sprite Creator, export png, animation.etc.

9-Video 9 (11 minuts)
21 d'agost del 2025

Novetats d'agost de l'app Mideas, per a creació de videojocs per a MSX.

11-Mideas News 11 (6 minuts)
25 d'agost del 2025

Noves funcions a Sprite Editor, mode Patrulla. Atents al mode Preview!

12-Mideas #12  (5 minuts 27 segons)

29 d'agost del 2025

Nou apartat Game Flow. Pel flux de treball del game play.

El canal de Kirsten Dirksen

 

Kirsten Dirksen té un canal de youtube amb més d'un milió de seguidors i amb un dia pot tenir més de 40k visualitzacions dels vídeos que penja.

Vídeos sobre vida senzilla, autosuficiència, cases poc convencionals (i úniques), horts (i bestiar), transport alternatiu, bricolatge, artesania i filosofies de vida.

Uns dels darrers vídeos que ha penjat és d'aquest espectacular projecte d'Alacant de l'empresa Rustega

Aquesta finca inclou dues cases naturals fetes a mà, un hivernacle geodèsic construït amb pedra local, un rierol excavat manualment, dues basses naturals per banyar-s’hi, un laberint de bambú i un hort i jardí de permacultura que prospera amb més de 2.000 plantes. És un lloc on la llar no només t’ofereix refugi—també t’alimenta, es refreda i escalfa sola, filtra l’aire i t’invita a frenar el ritme i viure bé.

És l’obra de Vicente Nadal, un pioner de la bioconstrucció al País Valencià. Amagat en una vall tranquil·la prop d’Alacant—just més enllà del bullici de la costa mediterrània—barreja el saber antic de la construcció amb innovacions intel·ligents i de baix cost tecnològic. En Vicente creu que el futur passa per recordar allò que hem oblidat: utilitzar materials locals, dissenyar segons el clima i crear cases que, en lloc de consumir, retornin.

Aquí, gairebé tot està fet de pedra, calç i fusta trobades al mateix terreny. La casa principal—que abans era una estructura simple d’arrebossat—ara està plena de corbes orgàniques i calidesa, amb parets gruixudes que aïllen i bancs calefactats integrats al disseny. La casa petita presenta un sistema modular de parets que transforma l’estudi diàfan en una distribució de dues habitacions en qüestió de segons. L’hivernacle en forma de cúpula no només és funcional, sinó també impactant—construït a mà amb morter de calç i fusta, permet cultivar aliments tot l’any.

En Vicente dissenya llars que s’integren amb la natura i milloren la salut. Utilitza arrebossats i pintures de calç tant a l’interior com a l’exterior, que absorbeixen CO₂ de forma natural, filtren l’aire interior i resisteixen floridura i bacteris. Per a la refrigeració, fa servir un sistema casolà conegut com a “Pou Canadenc” (un sistema de refredament subterrani) que aporta aire fresc des del subsòl. Per escalfar, utilitza estufes d’inèrcia tèrmica fetes amb materials naturals que alliberen escalfor lentament durant 24 hores amb molt poca fusta—calefactant tant l’espai com els seients integrats amb eficiència i bellesa.

El terreny està modelat per afavorir l’aigua i la vida: un rierol sinuós passa sota un pont de pedra d’estil romà, alimentant dues basses naturals profundes que filtren l’aigua i ofereixen hàbitat per a granotes, libèl·lules i peixos. Fins i tot hi ha una dutxa exterior de pedra calcària que, quatre anys després, continua com nova—gràcies a la resistència natural de la pedra calcària a les taques i als microbis.

Fins i tot els detalls finals estan arrelats en la saviesa local. Cortines d’espart pengen a l’exterior de les finestres, bloquejant el sol intens de l’estiu mentre deixen passar llum filtrada—i en dies calorosos, es poden ruixar amb aigua per refredar l’aire que entra a la casa. Una cabana dalt d’un arbre feta amb fusta reutilitzada i finestres recuperades, un circuit de bicicleta de muntanya i camins que serpentegen per l’hort mostren com l’alegria, el joc i la funcionalitat poden conviure en harmonia.

Per a en Vicente, aquest tipus de construcció no és un estil de vida alternatiu—és un retorn al seny. Quan consideres casa teva com un ecosistema, esdevé un espai que reforça la teva salut, et nodreix, et dona confort i et connecta amb la terra.

Tecnópolis: un nou vídeo resum de Claudio Álvarez Terán

 

Terán és molt prolífic i avui ha creat un nou vídeo-resum d'un llibre, en aquest cas Tecnópolis de Neil Postman.