viernes, 23 de agosto de 2013

Lección 6: Sprites y Texturas

  Esta vez aprenderemos a colocar imagenes  y sprites en los menus y opciones, les dejo el video de diamondandplatinum3 en ingles  y luego lo analizamos


 Comenzaremos con el script de la clases anteriores, se los dejo aca para que no lo  busquen :

class Scene_Mono < Scene_Base

  #--------------------------------------------------------------------------
  # ● Start
  #--------------------------------------------------------------------------
  def start
    super()
    @ventana = Window_Help.new
  end
  #--------------------------------------------------------------------------
  # ● Post_start
  #--------------------------------------------------------------------------
  def post_start
    super()
  end
  #--------------------------------------------------------------------------
  # ● Update
  #--------------------------------------------------------------------------
  def update
    super()
    return_scene if Input.trigger?(:B)
  end
  #--------------------------------------------------------------------------
  # ● Pre-terminate
  #--------------------------------------------------------------------------
  def pre_terminate
    Sound.play_cancel
  end
  #--------------------------------------------------------------------------
  # ● Terminate
  #--------------------------------------------------------------------------
  def terminate
    super()
    @ventana.dispose
  end
end


#=============================================================================
#                                WINDOW
#=============================================================================


class Window_MenuCommand < Window_Command

  alias mono_windmenucomm_addorcomm_nuevopalabra  add_original_commands
  def add_original_commands
    mono_windmenucomm_addorcomm_nuevopalabra
    add_command("Nuevo",   :Nuevo,   true) # Crea solo la palabra el menu
  end

end

#=============================================================================
#                                SCENE
#=============================================================================

class Scene_Menu < Scene_MenuBase
  alias mono_scenemenu_ccw_nuevocomando create_command_window
  def create_command_window
    mono_scenemenu_ccw_nuevocomando
    @command_window.set_handler(:Nuevo,      method(:command_Nuevo))
  end

  def command_Nuevo       #~Que pasa si aprieto en la opcion                                       
    SceneManager.call(Scene_Mono)
  end

end

#=============================================================================

 Ahora nos concentraremos en nuestro metodo estar de la escene, crearemos una variable de metodo y le pondremos cualquier nombre, pero ojala algo relacionado con los sprites, el mio sera @misprite y llamaremos para que genere una nueva funcion de sprites @misprite = Sprite.new() y luego con la misma variable de metodo la copiamo y pgamos debajo y le pondremos .bitmap , que es el que genera la imagen por asi decirlo.

 tendremos lo siguiente:

  #--------------------------------------------------------------------------
  # ● Start
  #--------------------------------------------------------------------------
  def start
    super()
    
    @misprite = Sprite.new()
    @misprite.bitmap


  Despues de la extension .bitmap, llamaremos el archivo imagen, esta imagen puede estar en cualquier carpeta de la carpeta Graphics, en este caso, pondremos una en la carpeta pictures, entonces nuestro metodo quedará = Cache.picture(" nombre de la imagen sin la extension ").

  Una vez hecho eso, veremos como colocarla en la pantalla utilizando los comandos x, y y z ,para eso copiamos nuestra variable @misprite y le ponemos la extension .x para moverla horizontalmente y .y para moverla verticalmente. La cantidad de espacio que hay en la ventana del juego horizontalmente es de 544 pixeles y de alto 414 pixeles, por lo que uno puede jugar con eso. si ponemos .z lo que veremos es la profundidad que va la imagen, si se pone una encima de otra. En este caso le pondran el valor que ustedes quieran.

 Luego de esto como no desaparece la imagen, debemos decirle al juego que lo haga, buscarmos la parte terminate y pondremos nuestras variable @misprite y @misprite.bitmap con la extension .dispose, quedaria de esta manera


  #--------------------------------------------------------------------------
  # ● Start
  #--------------------------------------------------------------------------
  def start
    super()
    
    @misprite = Sprite.new()
    @misprite.bitmap = Cache.picture("IMG_20130818_184618")
    @misprite.x = 200
    @misprite.y = 0
        
    
    @ventana = Window_Help.new
  end
  #--------------------------------------------------------------------------
  # ● Post_start
  #--------------------------------------------------------------------------
  def post_start
    super()
  end
  #--------------------------------------------------------------------------
  # ● Update
  #--------------------------------------------------------------------------
  def update
    super()
    return_scene if Input.trigger?(:B)
  end
  #--------------------------------------------------------------------------
  # ● Pre-terminate
  #--------------------------------------------------------------------------
  def pre_terminate
    Sound.play_cancel
  end
  #--------------------------------------------------------------------------
  # ● Terminate
  #--------------------------------------------------------------------------
  def terminate
    super()
    @ventana.dispose
    @misprite.dispose
    @misprite.bitmap.dispose
  end
end


  Ahora podemos arrancar el juego y ver que hay una ventana y nuestra imagen, para sacar la ventana borramos @ventana = Window_Help.new y @ventana.dispose, ahora veremos nuestra imagen, pero se ve tan mal :(  , no te preocupes, ahora veremos el zoom de la imagen.

  Para saber cuanto zoom necesitamos ocuparemos una calculadora, si dividimos 544 en el tamaño de nuestra imagen en largo obtendremos nuestro zoom en x , o sea si mi imagen vale 1024, dividimos 544:1024 = 0,53125 , o sea que ese será mi zoom en x y asi hago lo mismo con Y , para que no utilizemos calculadora siempre haremos lo siguiente.

  pondremos nuestra variable @misprite.zoom_x y la igualamos al total de la pantalla / total de nuestra imagen, donde total de nuestra imagen sera @misprite.bitmap.width .... y para el y sera 414 / @misprite.bitmap.height

  De esta manera nuestra imagen se vera acorde al tamaño, si no queremos poner todo el tiempo 544 y 414 se puede poner mas facil usando Graphics.width.to_f para la horizontal y Graphics.height.to_f para la vertical.

  El to_f es simplemente para indicar que Graphics es con decimales, para que no me lo deje en valores enteros o sino se nos ira a 0 si es muy grande el valor de la imagen.

  Si queremos ver la opacidad de la imagen, hacemos la variable con extension .opacity, donde va la escala de 0 a 255 de nada a ver la imagen.

  Si queremos ver o no la imagen se iguala a true para verla y false para sacarla


Eso es todo por ahora les dejo el script completo por si hay alguna duda, si tienen alguna otra pregunta me avisan y respondo:

class Scene_Mono < Scene_Base

  #--------------------------------------------------------------------------
  # ● Start
  #--------------------------------------------------------------------------
  def start
    super()
    @misprite = Sprite.new()
    @misprite.bitmap = Cache.picture("IMG_20130818_184618")
    @misprite.x = 0
    @misprite.y = 0
    @misprite.zoom_x = Graphics.width.to_f / @misprite.bitmap.width
    @misprite.zoom_y = Graphics.height.to_f / @misprite.bitmap.height 
  end
  #--------------------------------------------------------------------------
  # ● Post_start
  #--------------------------------------------------------------------------
  def post_start
    super()
  end
  #--------------------------------------------------------------------------
  # ● Update
  #--------------------------------------------------------------------------
  def update
    super()
    return_scene if Input.trigger?(:B)
  end
  #--------------------------------------------------------------------------
  # ● Pre-terminate
  #--------------------------------------------------------------------------
  def pre_terminate
    Sound.play_cancel
  end
  #--------------------------------------------------------------------------
  # ● Terminate
  #--------------------------------------------------------------------------
  def terminate
    super()
    @misprite.dispose
    @misprite.bitmap.dispose
  end
end


#=============================================================================
#                                WINDOW
#=============================================================================


class Window_MenuCommand < Window_Command

  alias mono_windmenucomm_addorcomm_nuevopalabra  add_original_commands
  def add_original_commands
    mono_windmenucomm_addorcomm_nuevopalabra
    add_command("Nuevo",   :Nuevo,   true) # Crea solo la palabra el menu
  end

end

#=============================================================================
#                                SCENE
#=============================================================================

class Scene_Menu < Scene_MenuBase
  alias mono_scenemenu_ccw_nuevocomando create_command_window
  def create_command_window
    mono_scenemenu_ccw_nuevocomando
    @command_window.set_handler(:Nuevo,      method(:command_Nuevo))
  end

  def command_Nuevo       #~Que pasa si aprieto en la opcion                                       
    SceneManager.call(Scene_Mono)
  end

end

#=============================================================================

 Nos veremos en otra leccion, adios...


  





No hay comentarios:

Publicar un comentario