Karoshi MSX Community

Hola.
A lo mejor es una tontería lo que voy a preguntar... pero ¿cómo se ha hecho la pantalla de inicio del GRIEL'S QUEST FOR THE SANGRAAL ?
Me gusta bastante y no sé si eso se hace con sprites o con otra técnica.

Saludos
 ;)

Te respondo yo mismo, que soy quien ha hecho el grafico del logotipo. La pantalla de inicio del Griel's Quest es SCREEN 2 puro y duro sin sprites, es decir, sólo utilizando patrones.

Para confeccionar el logo, primero me he dibujado en Photoshop el texto, y la espada la he convertido del juego original también en photoshop, reduciendola de tamaño. Después, con todo el logo montado, lo he filtrado por un conversor propio que he programado para que me detecte si hay 2 colores por byte, y de no ser así, que me lo corrija.

Tras filtrarlo por el conversor siempre hay cosas que no me gusta como quedan, por lo que vuelvo a repasar el resultado en Photoshop para corregir pixels aquí y allá a mano. Tras la útlima limpieza, se lo pasé a Robsy... supongo que el habrá pasado el archivo PCX con paleta MSX por el PCX2MSXi, y después lo habrá implementado en el menú principal.  ;)

Espero que te sirva la pista. Un abrazo!  ;)

O sea que te creas un fichero indexado en photoshop a 8 bits y luego lo guardas como pcx y lo "gestionas" con el PCX2MSXi ...
¿no?

No exactamente ;)

8 bits de color significa 256 colores (lo cual es una bicoca, aunque inalcanzable para nuestros MSX1 XD). El color debe tener una profundidad de 4 bits. Luego os pongo un tutorial sobre cómo lo hago, ok?

Hombre,¡ muchas gracias !
Pero cuando puedas, ¿vale?

Un abrazo.
 :)

¡ESO ESO!  8) 8) 8)

KNM
Learning

Vamos, YA  ;D

AdOC, creo que estás lanzándote con el basic si no me equivoco. Espero que estés pensando en montar una rom para esta dev (¡eso deseo!) así que aquí van algunos humildes consejos:

Empápate el modo de funcionamiento de screen 2 (para vpokearlo, vamos). Pregúntame lo que necesites, que yo empecé igual aquí mismo, si ir más lejos  ;D Sobre el dibujo, si no vas a hacer algo a pantalla completa, sino un logo más o menos grande, puedes siempre definir un rectángulo de caracteres (unos 8x4, por ejemplo, que serían 32 caracteres) para definir un título no muy grande pero sí lo suficiente para ser impactante. No se chupa muchos caracteres y así no te preocupas de incluir pantallas completas con rutinas asm ni nada de eso. Es algo con lo que empezar  :)

¡Un saludo!

Tutorial (1 de 3): Cómo hacer un logo para usarlo en un MSX
- Cómo preparar un archivo PCX para usar el MSX2PCXi y obtener el .CHR y .CLR de una imagen -

NOTA: En este tutorial cuento cómo lo hago yo. Esta manera de hacerlo probablemente no sea la más directa/cómoda/etc..., pero es como lo hago yo, y creo que es un método rápido y efectivo. Lo mejor es que cada uno se busque su forma más cómoda.

Primer paso, cogemos un logo/imagen/culesquiera. Voy a partir de un logo existente para ver el proceso, pero también vale para quien se quiera currar su propio logo, etc... yo voy a versionar uno, porque soy así de transgresor. Sea como sea, lo abrimos o creamos en Photoshop, que es el programa que yo uso para diseñarlo TODO.

(http://personal.telefonica.terra.es/web/karoshicorp/foro/tutorial_logo/tutorial_01.jpg)

El MSX es muy cuco y solo nos permite hacer 2 colores por byte... claro, lo ideal es saber donde está cada byte, si no estaríamos a ciegas... así pues, nos vamos a crear la cuadrícula (o grid).

(http://personal.telefonica.terra.es/web/karoshicorp/foro/tutorial_logo/tutorial_02.jpg)

(http://personal.telefonica.terra.es/web/karoshicorp/foro/tutorial_logo/tutorial_03.jpg)

Si entramos en Edición\preferencias\guías, vamos a ver esta ventana. Lo que vamos a hacer es poner un "8" en "Línea de cuadrícula" y "píxeles" en la unidad de medida que está al lado. Subdivisiones, "1". Así nos creamos una cuadrícula para ver las divisiones entre caracteres. ¿Véis?. Así tendremos mucho más control. ¿ok?.

(http://personal.telefonica.terra.es/web/karoshicorp/foro/tutorial_logo/tutorial_04.jpg)

Como el MSX no es la gran recaraba y ninguna conversión directa a SCREEN 2 nos va a sacar nada en claro de este logo tan complejo, vamos a simplificarlo borrando zonas para dejarlo más facilmente MSXable. Recordad, el trabajo en simplificar que hacéis previamente a un logo os ahorrará mucho trabajo para después. Yo, este logo, lo dejaría en outline, tal que así:

(http://personal.telefonica.terra.es/web/karoshicorp/foro/tutorial_logo/tutorial_05.jpg)

Bien, pues ya tenemos listo nuestro espacio de trabajo... bueno, no del todo, ya que estamos trabajando en RGB (24 bits de color), y eso, ni el TurboR. Así que debemos limitarnos e irnos al Modo Color Indexado. Se llama color indexado porque los colores se encuentran en un índice (index) y sólo podremos usar esos colores: como en el MSX1, que solo podemos usar 16 colores concretos. Con lo cual, vamos al modo color indexado: Imagen\Modo\Color indexado...

(http://personal.telefonica.terra.es/web/karoshicorp/foro/tutorial_logo/tutorial_06.jpg)

El cambiar de RGB a color indexado nos aparece esta ventanita para pedirnos que concretemos cual va a ser ese índice de colores. En la "Paleta" debemos seleccionar "Local (Adaptable)", en colores, 16 (obviamente XD), y en "Forzado" debemos abrir un nuevo menú, "Personalizar", que nos ayudará a "forzar" los colores MSX.

(http://personal.telefonica.terra.es/web/karoshicorp/foro/tutorial_logo/tutorial_07.jpg)

Ahora le tenéis que decir cuales son los colores que quereis forzar. Pero como ir uno por uno y cada vez es un rollo, lo mejor es definirlos en un archivo .act de photoshop... EL ARCHIVO QUE USO LO PODÉIS BAJAR AQUI (http://personal.telefonica.terra.es/web/karoshicorp/foro/tutorial_logo/paletamsx.act). Pues nada, le dáis a la opción "Cargar" y cargáis el .act. Dáis a "Aceptar" y después otra vez a "Aceptar" y os quedará algo como esto:

(http://personal.telefonica.terra.es/web/karoshicorp/foro/tutorial_logo/tutorial_08.jpg)

Bien, bien, bien. Pues ya tenemos nuestra imagen traducida a los colores MSX... ahora debemos ir mirando con lupa y a mano cada recuadro para que no existan más de 2 colores por byte. O eso, o utilizáis un conversor a SC2, que nos ahorra todo el trabajo, pero no es tan preciso como el ojo humano, y a veces los algoritmos te devuelven un churro de gráfico.

(http://personal.telefonica.terra.es/web/karoshicorp/foro/tutorial_logo/tutorial_09.jpg)

Vale, ya hemos currado de lo lindo con el logo, y lo hemos dejado impoluto. Pues nada, ahora a cortar la imágen. El ancho y el alto deben tener una medida múltiplo de 8, ok?. Utilizamos la herramienta de recortar de la ventana principal de herramientas, y nos quedará algo así.

(http://personal.telefonica.terra.es/web/karoshicorp/foro/tutorial_logo/tutorial_10.jpg)

Ahora, solo hay que Archivo\Guardar como... y elegir PCX como el formato a guardar. Ya está, tenemos nuestro PCX indexado con los colores del MSX :)

Ahora tenemos que separar de ese PCX los datos de color y de patrones. Nada como el PCX2MSXi para conseguirlo :). Eso si, si no usáis el Photoshop para crear el PCX usad el otro ejecutable PCX2MSX (el que no tiene la "i" al final). La historia es que el photoshop invierte el index de colores, y el PCX2MSXi lo corrige muy bien. Por cierto, estos dos programas se encuentran dentro del package del ensamblador asMSX de Karoshi, ok?.

(http://personal.telefonica.terra.es/web/karoshicorp/foro/tutorial_logo/tutorial_11.jpg)

El PCX2MSXi, tras esta jugada, nos devuelve dos archivos raw (dato puro): un archivo clr (con los datos del color) y otro archivo chr (con los datos del dibujo). En la próxima parte del tutorial explicaré como dibujar ese logo en MSX gracias a esos dos archivos, tanto en assembler, como en BASIC XD.

Me has convencido. A partir de ahora usaré el pcx2msxi  :D

Un 10 por el artículo, ¡sí, señor!

Un 0 por usar material con copyright  ;D

Muchas gracias !!!!
Esto es lo que estaba buscando.
Con photoshop trabajo  bastante, pero no sabía como hacer todo el proceso.
Gracias de nuevo por la paliza que te has dado.
;)

Voy a practicar un poco ahora con el "potochop"

Un abrazo!!!

Tutorial (2 de 3) : Cómo hacer un logo para usarlo en un MSX
- Como reproducir los datos .CHR y .CLR en ensamblador -

Vale, habíamos terminado el tutorial con dos archivos, uno .CLR (datos de color) y otro .CHR (datos de caracteres/dibujo). Como veíamos antes, el MSX2PCXi nos devolvía 112 bloques, es decir, 112 caracteres de 8x8. Con lo que aquí empezamos con un poco de teoría básica de SCREEN2.

SCREEN2 tiene 768 caracteres definibles, en tres bancos independientes de 256 caracteres cada uno. Las filas 0-7 son el banco 1, las filas 8-15 son el banco 2 y las filas 16-23 son el banco 3. Así que tenemos como 3 "librerías" para caracteres en la pantalla, pero cada zona utiliza su propia "librería", ok?. Después, para ordenar e imprimir los caracteres que nos interesen en la pantalla, tendremos que utilizar la tabla de nombres, que son 768 bytes donde escribimos los caracteres en la pantalla.

> En VRAM...

        CHRTBL  equ     0000h -> Tabla de dibujo de patrones (256 caracteres por cada banco)
        NAMTBL  equ     1800h -> Tabla de nombres
        CLRTBL  equ     2000h -> Tabla de colores de los patrones (256 caracteres por cada banco)

Así pues, habrá que "vpokear" los datos de dibujo y los de color en donde corresponda, para que esos 112 caractreres queden definidos en el banco 1 (filas 0-7), y después, indicarle en la tabla de nombres, como colocar esos caracteres.

Pues vamos a ello!

ASSEMBLER (asMSX)

Lo mejor para esto es el ensamblador sin duda. Luego veremos como hacerlo en BASIC, pero a parte de ser un rollo para hacerlo, es SUPER lento redefiniendo, y tardará un montón de segundos en mostrarnos el gráfico, cuando en asm es cuasi-instantáneo.



Vale, este código es muy sencillito. Para que lo veais claro los que no sepáis nada de ensamblador, he añadido comentarios a casi todas las líneas.

Primero doy las directivas de ensamblado para cargar rutinas de BIOS y demás zarandajas. Después pongo la pantalla en SCREEN 2,2,0 y color 15,1,1. Luego la desactivo con una rutina de bios y redefino los caracteres y los colores. Cuando ya tengo definidos los caracteres del primer banco (1-112) [recordad que el caracter "0" me lo guardo debajo de la manga para que sea el "vacio"], paso a crearme un mapa para escribir correctamente esas 112 piezas en la tabla de nombres: se trata de esos números que hay al final, que, si sois un poco avispados, detectaréis que es la estructura del logo con los caracteres colocaditos del 1 al 112. Transfiero ese mapa a vram y listo, vuelvo a activar la visualización... el Bucle del final es para que se quede bloqueado y podamos visualizar el logo: es como un 1000 goto 1000, para que nos entendamos.

Aquí tenéis un paquete con todos los archivos para compilar, y un archivo .ROM compilado para que veáis el resultado. Atención, si queréis hacer vuestras pruebas metiendo mano al código y todo lo demás (os lo recomiendo para irle quitando miedo al ensamblador), lo debéis compilar con el asMSX de Karoshi, ok?. No se, probad a cambiar los numeritos de la tabla de nombres para ver que pasa, etc...

Pack tutorial logo (asm) (http://personal.telefonica.terra.es/web/karoshicorp/foro/tutorial_logo/logo_test.rar)

Luego veremos como hacerlo en BASIC ;)

¡Muy buena la iniciativa!, ¡un tutorial de Photoshop, con capturas y todo!.  :god:
La verdad es que se podría inaugurar una sección específica en desarrollo en la que se fueran recopilando todos estos tutoriales que seguro irán apareciendo; así no quedarían dispersos por los hilos.

Sip, una vez lo termine, lo colgaré aparte :). Es muy sencillote, el siguiente lo haré acerca de cómo comprimir graficos para ahorrar MUCHO espacio.  ;)

Estoy por mandarte una botella de vino !!!  ;)

Jarl, no te cortes AdOC!  beer:)

Hombre el turorial esta de put... madre.
Si te animas a hacer algo más o si quieres pubricarlo en la moai sólo tienes que decirlo.

(http://personales.ya.com/aolmo/img/Imagen019.jpg)

Es un Rioja
;)

Oye , que era broma, ¿eh?

Jajajaja! Que bueno!  :D :D :D. Gracias por la botella de vino virtual!!. :D :D :D :D. A la tarde espero terminar el tutorial con el tema del BASIC, ala!  cmptr:)

Eres de Madrid?

Que va, AdOC, soy más del centro... Madrid queda un poco más a las afueras de Bilbao :D :D :D :D :D.

Te adjunto un Mapa del Mundo, para que veas por donde queda el botxito de mis amores...  ;)

(http://www.getxoweb.com/bilbao.jpg)

mmmm,....Bilbao, Bilbao,....es eso que queda al lado de Donosti, ¿verdad?.

 >:D

jltursan > :spank: < viejo_archivero

Mira, mira al smiley, como le gusta  :D :D

Saludos peña!
felicidades y gracias por este tutorial d conversión d gráficos! akí se nota cuándo se hacen las kosas por gusto!!!!
sólo una kosa, aún no tengo mucha idea d kómo funcionan los gráfikos sobre msx, pero k has kerido decir exactamente kon...

"...ahora debemos ir mirando con lupa y a mano cada recuadro para que no existan más de 2 colores por byte...."
?????????????????????????????????????

t refieres a k no existan más d dos kolores por rekuadro d la grid k hemos definido? (si es así, diría k en el ejemplo k has puesto no kumple)
a k t refieres exactamente kon lo d 2 kolores por byte? akaso a esta resolución kada sector d esa grid korresponde a un byte? o tal vez kada sector a 8 bytes (komo unidad mínima del gráfico n kuestión)?????       

Gracias d nuevo!!!!!

Jajajaja, mirando ese mapa, ahora puedo decir con orgullo que soy de las afueras de Bilbao  ;D

¡Un pintxo de tutoriales, por favor!  ;D

Pietroman, ser refiere a que por cada cuadrado de 8x8 píxeles (un caracter, vamos) tienes que mirar que en cada una de las líneas que lo forman (8 líneas de 8 píxeles cada una) no halla más de 2 colores. Es todo un arte lograr una pantalla impactante evitando este problema, ya lo verás  :)

Efectiviguander. Cada cuadrado de 8x8 pixels puede llegar a tener hasta 16 colores distintos si se diera el caso. La limitación es que en cada fila de 8 pixeles (8x1 pixeles) no haya más de 2 colores. Esa es la característica que nos da SCREEN2. Con SCREEN1, efectivamente, tan solo tendríamos 2 colores por caracter, en lugar de 2 colores por byte.

Lo que marcala rejilla (8x8 pixeles) es, como bien supones, la unidad mínima de definición, 1 caracter.

Por cierto, bienvenido Pietroman  ;)

Infinitos agradecimientos!!! Sois unos soletes :)

Pedazo de tutorial te has currado, socio.  :D

Como en su día perdí las fuentes del PCX2MSX y el PCX2MSXi, me planteé hacer un conversor más completo, de PNG a MSX, que soportara automáticamente dithering, reducción de color, etc. Pero claro, una cosilla más que se va a la to-do list.

A ver qué tal. Por lo demás, de nuevo me rindo a tu pies, oh, Jon, Dios del píxel!

Juas! que me lo digan a mi que me paso dia si dia tambien a hostias con el polka para sacar grafiquillos decentes (es lo malo de acostumbrarse al screen 5: que cuando vuelves a los origenes....) . De hecho creo que se podria hacer un juego puzzle con esta idea: 8 pixeles 2 colores STAGE 1: recrea la capilla de venecia en 20 bloques de 8x8 Tiempo!! (bufff seria una fikada del 15  ;D)

¡Vaya frikada de comentario! :voguel:, pero, bien pensado, sería un juego cojonudo  :D :D :D :D :D

Bueno... los que hayan obtenido el último de los códigos secretos del Namake's, habrán podido ver un bonito gráfico copiado a mano (pixel a pixel) utilizando el Polka, es otra forma de hacerlo... me llevó una mañana entera, apuff qué recuerdos :P

Joer... aún no tengo el gusto de tener ese código secreto... pero me has puesto los dientes largos...
 ;)
Sin desmerecer a ningún juego del msxdev05, los dos juegos que más me han gustado han sido el Caverns y el Namakes

Por cierto, voy avanzando... jajajaja

(http://personales.ya.com/aolmo/img/logo.jpg)

Ese AdOC!, impagable esa wip shot!!, adelanteeee!!!  :god:

¡¡Ahi va, que bueno!!. ¿Con que estás experimentando, pillín?, que por la pinta parece que le estás "sacando los colores" al VDP.  ;)

¡Ah! y se me olvidaba, que como suelen decirte en el curro : . Pues tú igual... :)

Jejejeje...Bonito gráfico si.....eheeeeeemmmmm....estoooooo

KNM
no digo más que me pegan...pero pistas ya teneis de como es  ;D ;D ;D

Desmerece, adoc, desmerece, que hay confianza...  ;D Que son de lo más curradísimo de la dev :D

Y esa pinta... un careto digitalizado, ¿hmmmm? ¿Qué estarás tramando?  :D

Sapphire, llegaré a ver ese gráfico, llegaré... no sé cuándo pero lo haré  ;)

Habrá que pensar esa idea de la capilla sixtina, RC743  ;D

Jarrl!! NO TOMEIS MIS PLABRAS EN SERIO!!!! y si lo haceis, no podemos empezar con algo más facilito para el stage 1??? no se, una señal de trafico, una figura geometrica, la mascota de barcelona´92 (como se llamaba?....Caby? cofi? Cuby? Amorfy?)
... que mal que estoy.. esto de pasarme 8 horas diarias currando con el potoxó y espues ir a casa y unas cuantas horitas más en el polka me esta afectando  :'(

En un spriteeee multicolooooor :guitar:....