Categorías
Contacto

Crear mapas en VRScript

Puedes descargarte el proyecto pinchando aquí: http://msx.tipolisto.es/files/test_mapper.zip

1.Copiando imágenes

Nos bajamos imágenes chulas de Google, escribiré en el buscador de imágenes “dibujo conjunto objetos de construcción”, de los resultados me gusta uno https://www.freepik.es/vector-gratis/conjunto-objetos-sitio-construccion_26278861.htm#fromView=keyword&page=22&position=17&uuid=55c684a9-e473-4287-8884-c32a39e28cb3&query=Vigas+Construccion :

la utilización de las imágenes de google no está permitida ya que tienen derechos de autor, puedes ir a sitios como https://opengameart.org/ para descargar imágenes gratuitas.

Lo descargo para abrirlo después con photshop, lo meto dentro de la carpeta text_mapper/textures:

2.Creamos nuestro tileset.png con photoshop

Vamos a Edición, preferencias->Generales y configuramos la cuadrícula:

Pinchamos en Guía, cudrícula y sectores (1), queremos que sean de 32 pixeles y de color gris (2,3,4), pinchamos en ok (5):

Creamos una imagen nueva de 800×640 px:

Vamos a Vista->Mostrar y seleccionamos Cuadrícula.

Vamos a abrir la imagen descargada y copiar y poner aquí algunas casas centradas en nuestros tiles o cuadraditos:

Seleccionamos la herramienta «Herramienta Marco Rectangular»(1 y 2) y procedemos a seleccionar la imagen que queramos, vamos a intentar copiar una casa(3).

Con nuestro marco seleccionado (salen unas líneas discontinuas), copiamos la selección pulsando las teclas control+C o edición copiar:

Las pegamos en nuestro tileset pero antes tenemos que ir a nuestra pestaña, crear un nueva capa y llamarla “casa1” por ejemplo, para renombrarla tenemos que hacer 2 clicks sobre las letras del nombre de la capa:

Ahora pegamos, como queremos eliminar las zonas de color blanco pinchamos en la varita mágica y pinchamos sobre la parte blanca, después la tecla suprimir:

Ahora queremos mover la imagen a la izquierda arriba, pinchamos en la herramienta mover:

Como queremos que la capa se adapte a los tiles pinchamos en Edición->transformar libre:

La modificamos para que ocupe los tiles que queramos pinchando en las circulitos y arrastrando:

Ahora vamos a crear otra capa donde pondremos la plataforma, el suelo y la meta:

Guardamos nuestro tileset como tieleset.psd y tileset.png dentro de la carpeta textures:

3. Creamos el stage0.tmx con tiled

Nos descargamos tiled de quí: https://thorbjorn.itch.io/tiled

Al abrirlo pinchamos en crear un Nuevo Mapa (1), elegimos ortogonal (2), en formato de la capa de patrones elige «base 64 (sin comprimir)»(3) , en tamaño del mapa: 25(25*32=800px) 20 (20*32=640) y en tamaño del patro de 32x32pixeles (5):

Seleccionamos Capa de patrones y pinchamos en la pestaña capas y en Nuevo conjunto de patones:

Seleccionamos nuestro png de tilesets, pinchando en explorar:

Pinchamos en empotrar y en Ok:

Pinchamos en el botón de estampar(1) y pinchamos en el 1 tile de 32×32 y sin soltar seleccionamos el edificio entero, soltamos cuando lo tengamos seleccionado (3):

Lo estampamos en nuestro mapa (1), ahora pinchamos en el bote de pintura (2), en el tile que representa al suelo (3) y hacemos click en la parte de abajo para crear la carretera (4):

Vamos a crear nuestros objetos, los objetos nos permiten ponerles características a los elementos que vayamos agregando, en nuestro caso las características serán plataforma y meta, pinchamos en nueva capa de objetos (1) y la seleccionamos (2):

Pinchamos en el tile de meta y en Seleccionar patrón (recuerda tener la capa de objetos seleccionada), arrastraremos el botón con nuestro objeto de tipo patrón al lugar donde queramos del mapa:

Cuando hagamos click tenemos que poner en nombre y en class “meta”:

Ahora vamos a poner nuestra plataforma, recuerda ponerle en nombre y en class “plataforma”:

Como quiero poner la plataforma en otra posición pincho en Seleccionar objetos (1) y lo muevo (2):

Ahora lo copio y pego para crear muchos con control+C y control+V:

Lo guardo dentro de textures como stage0.tmx:

Si abres con un editor el stage0.tmx verás que busca la imagen en la raiz del proyecto, por eso debemos de copiar y pegar el el tilset.png en la raiz:

4 El tmx_loader y el Main

Descárgate el ejemplo del msxvr wiki: https://github.com/msxvr/code/raw/master/examples/vr-script/tmx_loader.zip

Y del ejemplo quédate solo con el archivo tmx_loader.pi.

Ahora crea un main.pi y ponle esto:


class Main implements GL_Program
{
    properties:
        mapper = null;
        objects=[];
        player=null;
        stage=null;
    virtual Start()
    {
        // Configuraciones básicas de color de fondo, tamaño pantalla..
        SetBackColor(RGB(128,234,235));
        // 25x20 cuadraditos de 32px
        SetResolution(800,640);
        // -1 Ajusta l apantalla en horizontal
        // -2 Ajusta la pantalla en vertical
        // -3 Ajuste puede que no proporcional a pantalla completa
        SetViewScale(-1);
        //Espera al refresco de la pantalla
        SetVSync(True);
        //Estable la cantidad de redibujados por segundo
        SetFrameRate(60);
                
        //Alamcén de tiles
        mapper = NewMapper("mapper");
        
        GetEngine().LogPrint("cargado el Main");
    }
    function GetPlayer(){
        return player;
    }
    //Función que llama el tmx_loader cuando encuentra un objeto
    function AddActor(_name, _type, _x, _y, _params)
    {
        switch (_type)
        {
            case "plataforma":
                _type = 0; 
                break;
            case "meta":
                _type = 1; 
                break;
        }
        CreateObject(_x,_y,_type,_name);    
    }
    //crea objetos
    function CreateObject(_x,_y,_type, _name){
        _object=NewObject(_name,"Objeto", null, [_type]);
        _object.SetPos(_x, _y); 
        objects+=[_object];
    }
    //Borrar todos los objetos
    function DeleteObjects(){
        for(i=0; i<sizeof(objects);i++) delete objects[i];
        objects=[];
    }
}

Pulsa control+L para ver si sale el mensaje de cargado el main y no da errores, ejecuta con Control+R.

En este punto tus archivos deben quedar así:

  • textures/
  •                 stage0.tmx
  •                 tileset.png
  •                 tileset.psd
  • main.pi
  • tileset.png
  • tmx_loader.pi

5. El player, objects, app y stage0

5.1 El player.pi

Vamos a meterle las texturas con las animaciones del player, descárgatelas de aquí: http://msx.tipolisto.es/files/test_mapper.zip

Vamos a crear el player.pi

class player implements GL_Sprite
{
    properties:
        incrementoY=0;
        aceleracion=0;
        pad=null;
        lives=7;
        app=null;
    virtual _operator_new(_name,_creator, _params)
    {
        app=_params[0];
        //name, path, frame_inicio, frame_fin, offect_X, offest_Y, ancho_hoja, alto_hoja, ancho_sprite,alto_sprite, velocidad, jump_frames  
        Addanimationwithsheet("walk","textures/cat-walk.png",0,3,0,0,32,32);
        Addanimationwithsheet("stop","textures/cat-stop.png",0,3,0,0,32,32,-1,-1,-1,0.02);
        Addanimationwithsheet("jump","textures/cat-jump1.png",0,0,0,0,32,32);
        Addanimationwithsheet("fall","textures/cat-jump2.png",0,0,0,0,32,32);
        SetAnimation("stop");
        Setcollidermode(true);
        _pad=NewObject("pad","gl_pad");
        _pad.SetPreset("CURSORS");
        pad=_pad;
    }
    
    virtual Move(){ 
        _incrementoX=0;
        if (pad.IsButton(PAD_BUTTON_RIGHT)){
            _incrementoX=2;
            //Volteamos el sprite
            SetHFlip(False);
            
        }
        else if (pad.IsButton(PAD_BUTTON_LEFT)) {
            _incrementoX=-2;
            SetHFlip(True);
        }
        
        if(pad.IsButtonDown(PAD_BUTTON_1) && aceleracion==0){
            incrementoY=-5;
            aceleracion=0;
        }   
        
        //si estamos subiendo o bajando
        if(aceleracion!=0){
            //Si está subiendo  
            if (incrementoY<0) Setanimation("jump");
            //Si está bajando
            else Setanimation("fall"); 
        }else if(_incrementoX) Setanimation("walk");   
        else SetAnimation("stop");  
        
        incpos(_incrementoX,incrementoY);
        _x=clamp(GetX(), 0,GetApp().GetResX()-GetWF());
        setX(_x);

        //Rollo gravedad plataforma         
        if(GetY()>=14*32){
            SetY(14*32);
            incrementoY=0;
            aceleracion=0;
        }else{
            incrementoY+=aceleracion*GetFTime();
            aceleracion+=GetFTime()*0.025f;
        }
    }
    virtual OnSpriteCollision (_sp1,_sp2)
    {
        if(Class_Id(_sp2)=="Objeto"){
            if(_sp2.GetName()=="meta")
                app.GetEngine().LogPrint("Colisión con la meta, pasamos a la pantalla 2");
            else if(GetY()<_sp2.GetY() && incrementoY>=0 && _sp2.GetName()=="plataforma"){  
                //lo situamos encima de la plataforma
                SetY(_sp2.GetY()-GetHF()+1);
                incrementoY=0;
                aceleracion=0;
            }
        }
    }   
}

Modifiamos el main.pi para poder crear al player con:

class Main implements GL_Program
{
    virtual Start()
    {
        ........................................        

        //GetEngine().LogPrint("main cargado");
        player=NewObject("player","player", null, [this]);
        player.SetPriority(1);
    }
.........................................

Si te dice que player.pi no implementa un programa abre el main.pi y pulsa en ese archivo Control+R, si todo sale bien veremos al player:

5.2 Creamos el archivo objeto.pi

Creamos el archivo que definirá nuestro objectos

class Objeto implements GL_Sprite
{
    properties:
        type=0;
    virtual _operator_new(_name,_creator, _type)
    {
        type=_type[0];
        AddEmptyFrame(32,5);
        SetCollision(True);
    }   
    function GetName()
    {
        if(type==0)return "plataforma";
        else if(type==1)return "meta";
        else if(type==2)return "muerte";
    }
}

5.3 Creamos el archivo app.pi

Este archivo nos va a permitir llevarnos el Gl_Program a todas las pantallas que creemos:

class App {
    properties:
        app=null;
    function _operator_new(_app){
        app=_app;
    }
    function _operator_delete(){}
}

5.4 Creamos el Stage0.pi

class Stage0 implements App {
    
    virtual _operator_new(_app){
        _tmx = new TMX_Loader();
        _ok = _tmx.Load(app.mapper, "textures/stage0.tmx", app);
        delete _tmx;    
        app.GetActiveStage().SetDebug(True);    
        player=app.GetPlayer();
        player.SetPos(20,20);
        app.GetEngine().LogPrint("cargado el stage0");
    }
    virtual _operator_delete(){}
}

Tendremos que modificar el main.pi para que aparezca el stage0:

class Main implements GL_Program
{
	properties:
		mapper = null;
		objects=[];
		player=null;
		stage=null;
	virtual Start()
	{		
               ........................
		
		//GetEngine().LogPrint("main cargado");
		player=NewObject("player","player",null, [this]);
		player.SetPriority(1);
		
		stage=new Stage0(this);
	}
.........................

6.Vamos a mejorarlo un poco añadiendo el stage1.tmx

1.Vamos a photshop, abrimos nuestro tileset.psd y metemos una casa nueva:

2.Vamos al tiled y creamos otro tmx llamado «stage1.tmx»

3.Creamos el archivo «stage1.pi»:

class Stage1 implements App {
	
	virtual _operator_new(_app){
		_tmx = new TMX_Loader();
		_ok = _tmx.Load(app.mapper, "textures/stage1.tmx", app);
		delete _tmx;	
		app.GetActiveStage().SetDebug(True);	
		player=app.GetPlayer();
		player.SetPos(20,20);
		app.GetEngine().LogPrint("cargado el stage1");
	}
	virtual _operator_delete(){
		app.mapper.ClearLayers();
		app.DeleteObjects();
	}
}

4. Modificamos el _operator_delete() del stage 0 para que permita borrar los objetos y el mapper:

class Stage0 implements App {
	
	virtual _operator_new(_app){
		_tmx = new TMX_Loader();
		_ok = _tmx.Load(app.mapper, "textures/stage0.tmx", app);
		delete _tmx;	
		app.GetActiveStage().SetDebug(True);	
		player=app.GetPlayer();
		player.SetPos(20,20);
		app.GetEngine().LogPrint("cargado el stage0");
	}
	virtual _operator_delete(){
		app.GetEngine().LogPrint("borrando el stage0");
		app.mapper.ClearLayers();
		app.DeleteObjects();
	}
}

5.Modificamos el OnSpriteCollision del player.pi para que cuando haga colisión con el objeto de tipo «meta» cambie de pantalla:


class player implements GL_Sprite
{
........................................
	virtual OnSpriteCollision (_sp1,_sp2)
	{
	    if(Class_Id(_sp2)=="Objeto"){
			if(_sp2.GetName()=="meta"){
				app.GetEngine().LogPrint("Colisión con la meta, pasamos a la pantalla 2");
				delete app.stage;
				app.stage=new Stage1(app);
			}
			else if(GetY()<_sp2.GetY() && incrementoY>=0 && _sp2.GetName()=="plataforma"){	
				//lo situamos encima de la plataforma
				SetY(_sp2.GetY()-GetHF()+1);
				incrementoY=0;
				aceleracion=0;
			}
		}
	}	
}

Fin. 🙂

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *