▶
Add-on

Affichage partiel des images XP

Affichez seulement une portion d’image dans RPG Maker XP pour utiliser des planches de facesets, portraits ou sprites plus proprement.

Ce script permet d’afficher seulement une partie d’une image dans RPG Maker XP, au lieu d’afficher le fichier entier.

En pratique, ça ajoute aux images affichées par événement un fonctionnement proche de celui des spritesheets : vous définissez une zone visible dans le bitmap, puis le jeu n’affiche que cette portion.

À quoi sert ce script ?

Par défaut, quand vous affichez une image dans RPG Maker XP, le moteur affiche le fichier complet.

Le problème, c’est que dès que vous voulez travailler avec :

  • plusieurs facesets dans une seule planche ;
  • plusieurs portraits dans une seule image ;
  • des éléments d’interface regroupés dans un même fichier ;
  • des planches de sprites ;
  • des variations d’images dans un seul bitmap ;

vous êtes vite obligé de multiplier les fichiers.

Ce script règle ça.
Il permet de dire au moteur : “affiche seulement cette zone de l’image”.

Ce que fait le script

Le script ajoute deux commandes à Game_Picture :

$game_screen.pictures[ID].rect(x, y, width, height)

et

$game_screen.pictures[ID].rectchange(duration, x, y, width, height)

La première sert à définir une zone d’affichage.
La seconde sert à faire évoluer cette zone dans le temps.

Autrement dit :

  • rect découpe une portion visible ;
  • rectchange anime ou déplace ce découpage sur plusieurs frames.

Fonctionnement des commandes

1. Définir la zone affichée

$game_screen.pictures[ID].rect(x, y, width, height)

Cette commande définit quelle partie de l’image sera visible.

Paramètres

  • ID : identifiant de l’image affichée
  • x : position X de départ dans l’image
  • y : position Y de départ dans l’image
  • width : largeur de la zone visible
  • height : hauteur de la zone visible

Repère

  • x = 0 correspond au bord gauche de l’image
  • y = 0 correspond au bord haut de l’image

Exemple

$game_screen.pictures[1].rect(200, 300, 96, 96)

Ici, l’image 1 n’affichera plus tout le fichier, mais uniquement un rectangle de 96×96 à partir de la position (200, 300) dans le bitmap.

2. Modifier la zone affichée progressivement

$game_screen.pictures[ID].rectchange(duration, x, y, width, height)

Cette commande modifie la zone visible de manière progressive.

Paramètres

  • ID : identifiant de l’image
  • duration : durée de la transition en frames
  • x : nouvelle position X
  • y : nouvelle position Y
  • width : nouvelle largeur
  • height : nouvelle hauteur

Important

Cette commande ne sert que si une zone a déjà été définie avec rect.

Exemple

$game_screen.pictures[1].rectchange(20, 96, 0, 96, 96)

Pendant 20 frames, la zone visible de l’image 1 glissera vers la nouvelle portion définie.

Cas d’usage concrets

Facesets regroupés dans un seul fichier

C’est le cas le plus évident.

Au lieu d’avoir :

  • 1 fichier par portrait
  • 1 image à charger par variation

vous pouvez faire une seule planche contenant tous les visages, puis afficher uniquement la portion voulue.

Résultat :

  • moins de fichiers ;
  • organisation plus propre ;
  • plus facile à maintenir.

Planche de sprites personnalisée

Le script peut aussi servir à afficher plusieurs éléments d’une planche unique, comme :

  • expressions ;
  • icônes ;
  • portraits ;
  • éléments UI ;
  • mini animations.

Ce n’est pas un système d’animation complet à lui seul, mais c’est une bonne base pour bricoler quelque chose de propre dans XP.

Interface et HUD

Vous pouvez également l’utiliser pour :

  • afficher une jauge découpée dans un bitmap ;
  • changer dynamiquement une icône dans une grande planche ;
  • ne révéler qu’une partie d’un cadre ou d’une fenêtre ;
  • simuler un masque très simple.
Bloc de code
TEXTE
#==============================================================================
# ** Affichage partiel des images                          Par Erwill
#------------------------------------------------------------------------------
#  Ce script ajoute une option à l'affichage de l'image : la possibilité de
#  sélectionner qu'une partie qui sera affichée, un peu comme le principe des
#  spritesheets.
#------------------------------------------------------------------------------
#  Mode d'emploi :
#  
#  Voici les commandes ajoutées :
#
#  - $game_screen.pictures[ID].rect(x, y, width, height) Permet de sélectionner la partie qui sera affichée.
#     Elle permet de créer et de paramétrer la zone d'affichage de l'image.
#      - ID = l'id de l'image.
#      - X = La position X de la zone d'affichage sur l'image.
#      - Y = La position Y de la zone d'affichage sur l'image.
#      - width = La longueur de la zone d'affichage.
#      - height = La hauteur de la zone d'affichage.
#
#  - $game_screen.pictures[ID].rectchange(duration, x, y, width, height) Permet de déplacer la partie affichée. (ne fonctionne pas s'il n'y a pas eu la première commande pour l'image)
#     Elle permet de modifier la zone d'affichage de l'image.
#      - ID = l'id de l'image.
#      - Duration = La durée de la modification en frame.
#      - X = La position X de la zone d'affichage sur l'image.
#      - Y = La position Y de la zone d'affichage sur l'image.
#      - width = La longueur de la zone d'affichage.
#      - height = La hauteur de la zone d'affichage.
#
#==============================================================================


#==============================================================================
# ** Game_Picture
#==============================================================================
class Game_Picture
  #--------------------------------------------------------------------------
  # * Public Instance Variables
  #--------------------------------------------------------------------------
  attr_reader   :number                   # picture number
  attr_reader   :name                     # file name
  attr_reader   :origin                   # starting point
  attr_reader   :x                        # x-coordinate
  attr_reader   :y                        # y-coordinate
  attr_reader   :zoom_x                   # x directional zoom rate
  attr_reader   :zoom_y                   # y directional zoom rate
  attr_reader   :opacity                  # opacity level
  attr_reader   :blend_type               # blend method
  attr_reader   :tone                     # color tone
  attr_reader   :angle                    # rotation angle
  attr_reader   :recx                     # Rect X
  attr_reader   :recy                     # Rect Y
  attr_reader   :recw                     # Rect width
  attr_reader   :rech                     # Rect Height
  attr_reader   :rece                     # Rect enable
  #--------------------------------------------------------------------------
  # * Object Initialization
  #     number : picture number
  #--------------------------------------------------------------------------
  def initialize(number)
    @number = number
    @name = ""
    @origin = 0
    @x = 0.0
    @y = 0.0
    @zoom_x = 100.0
    @zoom_y = 100.0
    @opacity = 255.0
    @blend_type = 1
    @duration = 0
    @target_x = @x
    @target_y = @y
    @target_zoom_x = @zoom_x
    @target_zoom_y = @zoom_y
    @target_opacity = @opacity
    @tone = Tone.new(0, 0, 0, 0)
    @tone_target = Tone.new(0, 0, 0, 0)
    @tone_duration = 0
    @angle = 0
    @rotate_speed = 0
    @recx = 0
    @recy = 0
    @recw = 0
    @rech = 0
    @rece = 0
    @rect_duration = 0
  end
  #--------------------------------------------------------------------------
  # * Show Picture
  #     name       : file name
  #     origin     : starting point
  #     x          : x-coordinate
  #     y          : y-coordinate
  #     zoom_x     : x directional zoom rate
  #     zoom_y     : y directional zoom rate
  #     opacity    : opacity level
  #     blend_type : blend method
  #--------------------------------------------------------------------------
  def show(name, origin, x, y, zoom_x, zoom_y, opacity, blend_type)
    @name = name
    @origin = origin
    @x = x.to_f
    @y = y.to_f
    @zoom_x = zoom_x.to_f
    @zoom_y = zoom_y.to_f
    @opacity = opacity.to_f
    @blend_type = blend_type
    @duration = 0
    @target_x = @x
    @target_y = @y
    @target_zoom_x = @zoom_x
    @target_zoom_y = @zoom_y
    @target_opacity = @opacity
    @tone = Tone.new(0, 0, 0, 0)
    @tone_target = Tone.new(0, 0, 0, 0)
    @tone_duration = 0
    @angle = 0
    @rotate_speed = 0
    @rect_target_x = 0
    @rect_target_y = 0
    @rect_target_width = 0
    @rect_target_height = 0
  end
  #--------------------------------------------------------------------------
  # * Frame Update
  #--------------------------------------------------------------------------
  def update
    if @duration >= 1
      d = @duration
      @x = (@x * (d - 1) + @target_x) / d
      @y = (@y * (d - 1) + @target_y) / d
      @zoom_x = (@zoom_x * (d - 1) + @target_zoom_x) / d
      @zoom_y = (@zoom_y * (d - 1) + @target_zoom_y) / d
      @opacity = (@opacity * (d - 1) + @target_opacity) / d
      @duration -= 1
    end
    if @tone_duration >= 1
      d = @tone_duration
      @tone.red = (@tone.red * (d - 1) + @tone_target.red) / d
      @tone.green = (@tone.green * (d - 1) + @tone_target.green) / d
      @tone.blue = (@tone.blue * (d - 1) + @tone_target.blue) / d
      @tone.gray = (@tone.gray * (d - 1) + @tone_target.gray) / d
      @tone_duration -= 1
    end
    if @rotate_speed != 0
      @angle += @rotate_speed / 2.0
      while @angle < 0
        @angle += 360
      end
      @angle %= 360
    end
    if @rect_duration >= 1
      @recx = (@recx * (@rect_duration - 1) + @rect_target_x) / @rect_duration
      @recy = (@recy * (@rect_duration - 1) + @rect_target_y) / @rect_duration
      @recw = (@recw * (@rect_duration - 1) + @rect_target_width) / @rect_duration
      @rech = (@rech * (@rect_duration - 1) + @rect_target_height) / @rect_duration
      @rect_duration -= 1
    end
  end
  #--------------------------------------------------------------------------
  # * rect(x, y, width, height)
  #     Elle permet de créer et de paramétrer la zone d'affichage de l'image.
  #      - ID = l'id de l'image.
  #      - X = La position X de la zone d'affichage sur l'image.
  #      - Y = La position Y de la zone d'affichage sur l'image.
  #      - width = La longueur de la zone d'affichage.
  #      - height = La hauteur de la zone d'affichage.
  #--------------------------------------------------------------------------
  def rect(x, y, width, height)
    @recx = x
    @recy = y
    @recw = width
    @rech = height
    @rece = 1
  end
  #--------------------------------------------------------------------------
  # * rectchange(duration, x, y, width, height)
  #     Elle permet de modifier la zone d'affichage de l'image.
  #      - ID = l'id de l'image.
  #      - Duration = La durée de la modification en frame.
  #      - X = La position X de la zone d'affichage sur l'image.
  #      - Y = La position Y de la zone d'affichage sur l'image.
  #      - width = La longueur de la zone d'affichage.
  #      - height = La hauteur de la zone d'affichage.
  #--------------------------------------------------------------------------
  def rectchange(duration, x, y, width, height)
    @rect_duration = duration
    @rect_target_x = x
    @rect_target_y = y
    @rect_target_width = width
    @rect_target_height = height
  end
end




#==============================================================================
# ** Sprite_Picture
#==============================================================================
class Sprite_Picture < Sprite
  #--------------------------------------------------------------------------
  # * Frame Update
  #--------------------------------------------------------------------------
  def update
    super
    # If picture file name is different from current one
    if @picture_name != @picture.name
      # Remember file name to instance variables
      @picture_name = @picture.name
      # If file name is not empty
      if @picture_name != ""
        # Get picture graphic
        self.bitmap = RPG::Cache.picture(@picture_name)
      end
    end
    # If file name is empty
    if @picture_name == ""
      # Set sprite to invisible
      self.visible = false
      return
    end
    # Set sprite to visible
    self.visible = true
    # Set transfer starting point
    if @picture.origin == 0
      self.ox = 0
      self.oy = 0
    else
      if @picture.rece==1 then
      self.ox = @picture.recw / 2
      self.oy = @picture.rech / 2
      else
      self.ox = self.bitmap.width / 2
      self.oy = self.bitmap.height / 2
      end
    end
    # Set sprite coordinates
    self.x = @picture.x
    self.y = @picture.y
    self.z = @picture.number
    # Set zoom rate, opacity level, and blend method
    self.zoom_x = @picture.zoom_x / 100.0
    self.zoom_y = @picture.zoom_y / 100.0
    self.opacity = @picture.opacity
    self.blend_type = @picture.blend_type
    # Set rotation angle and color tone
    self.angle = @picture.angle
    self.tone = @picture.tone
    if @picture.rece==1 then
    self.src_rect.set(@picture.recx, @picture.recy, @picture.recw, @picture.rech)
    end
  end
end

Scripts utiles

Newsletter

Ne ratez rien de la communauté

Nouveautés, jeux inspirants et ressources utiles directement dans votre boîte mail.

Pas de spam · Désinscription en un clic