I want to edit the title screen

Question

Hello! I'm on my way to customize my game and I want a custom title screen where some sprites slide from the border of the screen to some positions, like the "play" and "credits" buttons do. The problem comes when the new images I want to put don't appear in the screen. May it be a depth related problem? In that case, how can I solve it? Here's the script:

module UI

  # UI component showing the controls of the title screen (Play / Credits)

  class TitleControls < SpriteStack

    # Get the index of the selection

    # @return [Integer]

    attr_reader :index

    # Get the play bg button

    # @return [Sprite]

    attr_reader :play_bg

    # Get the credit bg button

    # @return [Sprite]

    attr_reader :credit_bg

    def initialize(viewport)

      super(viewport, 0, 240, default_cache: :title)

      create_sprites

      self.index = 0

      @wait_duration = Configs.scene_title_config.control_wait || 0.5

      create_animation

    end

    # Set the index of the selection

    # @param index [Integer]

    def index=(index)

      @index = index

      @play_bg.visible = index == 0

      @credit_bg.visible = index == 1

    end

    # Update the animation

    def update

      super

      @animation.update

    end

    # Tell if the controls are done transitionning

    # @return [Boolean]

    def done?

      @animation.done?

    end

    private

    # Create all the necessary sprites for the title controls

    def create_sprites

      create_button_shader

      create_play_bg

      create_credits_bg

      create_play_text

      create_credit_text

  create_title_sprite

  create_star_sprite

    end

    # Function that creates the button shader

    def create_button_shader

      @shader = Shader.create(:title_button)

      @shader_time_update = proc { |t| @shader.set_float_uniform('t', t) }

    end

    def create_play_bg

      @play_bg = add_sprite(214, 168, 'shader_bg')

      @play_bg.ox = @play_bg.width / 2

      @play_bg.shader = @shader

    end

    def create_credits_bg

      @credit_bg = add_sprite(214, 192, 'shader_bg')

      @credit_bg.ox = @credit_bg.width / 2

      @credit_bg.shader = @shader

    end

    def create_play_text

      @font_id = 20

      add_text(214, 170, 0, 24, text_get(32, 77).capitalize, 1, 1, color: 9)

    end

    def create_credit_text

      @font_id = 20

      add_text(214, 194, 0, 24, 'Credits', 1, 1, color: 9)

    end

    # Create the animation

    def create_animation

  @animation = Yuki::Animation.move(2, @title_sprite, 0, 0, 0, 0)

      @animation = Yuki::Animation.wait(@wait_duration)

      @animation.play_before(Yuki::Animation.move_discreet(0.5, self, 0, 240, 0, 0))

      @animation.play_before(Yuki::Animation.send_command_to(self, :create_loop_animation))

      @animation.start

    end

# Animación del título

    def create_title_animation

  @title_animation = Yuki::Animation.move_discreet(1, @title_sprite, 0, 0, 0, 240)

    end

    # Create the loop animation

    def create_loop_animation

      @animation = Yuki::Animation::TimedLoopAnimation.new(2)

      wait = Yuki::Animation.wait(2)

      shader_animation = Yuki::Animation::ScalarAnimation.new(2, @shader_time_update, :call, 0, 1)

      wait.parallel_add(shader_animation)

      @animation.play_before(wait)

      @animation.start

    end

def create_title_sprite

      @title_sprite = add_sprite(0, 290, 'Titulo')

    end

def create_star_sprite

      @star_sprite = add_sprite(428, 0, 'Estrella')

    end

  end

end

Graphics.on_start do

  Shader.register(:title_button, 'graphics/shaders/title_button.frag')

end

PS: I only tried to animate the title_sprite object for now on purpose.

Answer 1

You have created a new animation but you made 3 mistakes causing this animation to not work at all:
1. You saved it inside the same instance variable as the other animation
2. You did not call the start function on it
3. You did not call the update function (@animation.update but with the other instance variable, eg. @animation2.update).

Btw, I suggest that you avoid copying the whole script when you make modifications, just keep the part you have changed, it helps reviewing your changes so we know what's the problem ;)

Comments

Hi, thanks for helping. I tried it but nothing happens. Before sending the script again, how can I make it shorter without having any errors?

---

I would say something like this (not tested):

module UI
  class TitleControls < SpriteStack
    alias psdk_initialize initialize
    def initialize(viewport)
      psdk_initialize(viewport)
      create_title_animation
    end
    alias psdk_update update
    # Update the animation
    def update
      psdk_update
      @title_animation.update
    end
    # Tell if the controls are done transitionning
    # @return [Boolean]
    def done?
      @animation.done? && @title_animation.done?
    end
    private
    alias psdk_create_sprites create_sprites
    # Create all the necessary sprites for the title controls
    def create_sprites
      psdk_create_sprites
      create_title_sprite
      create_star_sprite
    end
    # Animación del título
    def create_title_animation
      @title_animation = Yuki::Animation.move_discreet(1, @title_sprite, 0, 0, 0, 240)
      @title_animation.start
    end
    def create_title_sprite
      @title_sprite = add_sprite(0, 290, 'Titulo')
    end
    def create_star_sprite
      @star_sprite = add_sprite(428, 0, 'Estrella')
    end
  end
end

---

Hey again! I picked that code and made a few changes to complete the animation I wanted. It works fine! Thank you very much. Do you recommend me any guide I can follow in order to learn Ruby? I'd like to understand it so I can code myself.

---

I can suggest you few things:
- https://www.tutorialspoint.com/ruby/index.htm
- https://gitlab.com/NuriYuri/tutoriel_ruby/-/blob/master/en/0_Table_of_Contents.md
- https://www.hackerrank.com/domains/ruby

The hacker rank thing, I did it, it's quite nice because it really help thanks to exercices.

Otherwise, you can also ask some question about things and we can probably explain you what's going on or what thing means :)