Es mostren els missatges amb l'etiqueta de comentaris programació. Mostrar tots els missatges
Es mostren els missatges amb l'etiqueta de comentaris programació. Mostrar tots els missatges

divendres, 12 de setembre del 2025

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







diumenge, 31 d’agost del 2025

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ó (sortalfabè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.




divendres, 22 d’agost del 2025

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. 



dimarts, 19 d’agost del 2025

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.



dimarts, 2 de desembre del 2014

Codelearn: cursos de programació per a nanos

Codelearn neix amb la voluntat d'ensenyar i difondre el pensament computacional i la programació als nens i adolescents.