[Scripting Question] Changing the Screen Size messes up my animation

[Izanagi987]

Hi, I have a little problem with my menu animation. The icons do a little animation when they are selected, however when i change the screen size in the options, they start to drift to the upper corner of the screen.
I have no idea why this happens and tried some things myself but i cant seem to get it working. At the standard screen size everything works as intended.
Would be really nice if anyone could help me wit this problem.
Here is the code that handles the icon animation:

Spoiler:

#===============================================================================
# * Update Method
#===============================================================================  
  def update
    Graphics.update
    Input.update
    #pbUpdateSceneMap
    @frame+=1
    @sprites["party"].x=408  if $Trainer.party.length>0
    @sprites["pokedex"].x=308 if $Trainer.pokedex
    @frame=0 if @frame>=20
    frame=[0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1]
    @count=frame[@frame]
    if (MENUANIMATION==true)    
      @sprites["pokedex"].y-=0.5     if @select==1 && @count==0
      @sprites["pokedex"].y+=0.5     if @select==1 && @count==1
      @sprites["pokedex"].y=55       if @select != 1 && $Trainer.pokedex
      
      @sprites["party"].y-=0.5       if @select==2 && @count==0
      @sprites["party"].y+=0.5       if @select==2 && @count==1
      @sprites["party"].y=75         if @select != 2 && $Trainer.party.length>0

      @sprites["bag"].y-=0.5         if @select==3 && @count==0
      @sprites["bag"].y+=0.5         if @select==3 && @count==1
      @sprites["bag"].y=135          if @select != 3
      
      @sprites["save"].y-=0.5        if @select==4 && @count==0
      @sprites["save"].y+=0.5        if @select==4 && @count==1
      @sprites["save"].y=155         if @select != 4
      
      @sprites["map"].y-=0.5         if @select==5 && @count==0
      @sprites["map"].y+=0.5         if @select==5 && @count==1
      @sprites["map"].y=215          if @select != 5
      
      @sprites["music"].y-=0.5       if @select==6 && @count==0
      @sprites["music"].y+=0.5       if @select==6 && @count==1
      @sprites["music"].y=235        if @select != 6
      
      @sprites["trainercard"].y-=0.5 if @select==7 && @count==0
      @sprites["trainercard"].y+=0.5 if @select==7 && @count==1
      @sprites["trainercard"].y=295  if @select != 7
        
      @sprites["options"].y-=0.5     if @select==8 && @count==0
      @sprites["options"].y+=0.5     if @select==8 && @count==1
      @sprites["options"].y=315      if @select != 8
    end
    
    x=[5000,5,0,5,263,5,263,5000]
    y=[5000,49,49,145,145,243,243,5000]
    y=[5000,5000,49,145,145,243,243,5000]   if $Trainer.party.length==0 && $Trainer.pokedex
    y=[5000,49,5000,145,145,243,243,5000]   if $Trainer.party.length>0  && !$Trainer.pokedex
    y=[5000,5000,5000,145,145,243,243,5000] if $Trainer.party.length==0 && !$Trainer.pokedex
    if @select==1
      @sprites["pokedex"].setBitmap("Graphics/Pictures/PauseMenu/pokedex2")
      else
      @sprites["pokedex"].setBitmap("Graphics/Pictures/PauseMenu/pokedex")
    end
    if @select==2
      @sprites["party"].setBitmap("Graphics/Pictures/PauseMenu/pokemon2")
      else
      @sprites["party"].setBitmap("Graphics/Pictures/PauseMenu/pokemon")
    end
    if @select==3
      @sprites["bag"].setBitmap("Graphics/Pictures/PauseMenu/bag2")
      #@sprites["bag"].setBitmap("Graphics/Pictures/PauseMenu/bag2_f") if $Trainer.isFemale?
      else
      @sprites["bag"].setBitmap("Graphics/Pictures/PauseMenu/bag")
      #@sprites["bag"].setBitmap("Graphics/Pictures/PauseMenu/bag_f") if $Trainer.isFemale?
    end
    if @select==4
      @sprites["save"].setBitmap("Graphics/Pictures/PauseMenu/save2")
      else
      @sprites["save"].setBitmap("Graphics/Pictures/PauseMenu/save")
    end
    if @select==5
      @sprites["map"].setBitmap("Graphics/Pictures/PauseMenu/map2")
      else
      @sprites["map"].setBitmap("Graphics/Pictures/PauseMenu/map")
    end
    if @select==6
      @sprites["music"].setBitmap("Graphics/Pictures/PauseMenu/music2")
      else
      @sprites["music"].setBitmap("Graphics/Pictures/PauseMenu/music")
    end
    if @select==7
      @sprites["trainercard"].setBitmap("Graphics/Pictures/PauseMenu/license2")
      else
      @sprites["trainercard"].setBitmap("Graphics/Pictures/PauseMenu/license")
    end
    if @select==8
      @sprites["options"].setBitmap("Graphics/Pictures/PauseMenu/options2")
      else
      @sprites["options"].setBitmap("Graphics/Pictures/PauseMenu/options")
    end    
    if $Trainer.party.length>0
      @sprites["party"].visible=true
      else
      x[1]=5000
      @select=3 if @select==2
      @sprites["party"].visible=false
    end
      if $Trainer.pokedex
      @sprites["pokedex"].visible=true
    else
      x[2]=5000
      @select=2 if @select==1
      @sprites["pokedex"].visible=false
    end
  end

Gif of the problem:

Spoiler:

Thank you in advance!

 

[#Not Important]

The problem (I think) is that you made the place where the icon needs to float to as a set x and y so if the screen gets bigger the x and y you set are close to the top left. Maybe add a part checking the size of the screen?

 

[Luka S.J.]

Never increment pixel positions (X, Y) by non integer values. The sprite resizer will not calculate those properly when changing screen resolutions. I think that your problem will go away once your position incrementing is done in integer intervals. Do a skip of the increment every 2 frames if you want to go half the distance (half as fast).

 

[#Not Important]

Never increment pixel positions (X, Y) by non integer values. The sprite resizer will not calculate those properly when changing screen resolutions. I think that your problem will go away once your position incrementing is in integer intervals. Do a skip of the increment every 2 frames if you want to go half the distance (half as fast).

That is what I said but makes a lot more sense 😅.
Thanks Luka!

 

[#Not Important]

<snip>

Also can you post this as a tutorial when it is done?

 

[Izanagi987]

Never increment pixel positions (X, Y) by non integer values. The sprite resizer will not calculate those properly when changing screen resolutions. I think that your problem will go away once your position incrementing is done in integer intervals. Do a skip of the increment every 2 frames if you want to go half the distance (half as fast).

Holy shit it worked!! Thank you so much Luka. Will definitely keep this in mind next time.

 

[Izanagi987]

Also can you post this as a tutorial when it is done?

Do you mean the fix or the menu itself? Luka's post was pretty much the fix. Just had to replace the 0.5px with 1px.
The menu itself is a modified version of the bw2 menu. I have no experience whatsoever in coding so most of the process was just trying to understand the code and modifying pixel positions of the icons as well as deleting unnessecary blocks of code.
I wont be posting the menu as a ressource because its for my own fangame but that was pretty much the process. Just trial and error most of the time.
Besides, i think its cooler if everyone designs their menu by themselves so that we have a variety of cool looking menus, each one with their own little touch ;)

 

[#Not Important]

Do you mean the fix or the menu itself? Luka's post was pretty much the fix. Just had to replace the 0.5px with 1px.
The menu itself is a modified version of the bw2 menu. I have no experience whatsoever in coding so most of the process was just trying to understand the code and modifying pixel positions of the icons as well as deleting unnessecary blocks of code.
I wont be posting the menu as a ressource because its for my own fangame but that was pretty much the process. Just trial and error most of the time.
Besides, i think its cooler if everyone designs their menu by themselves so that we have a variety of cool looking menus, each one with their own little touch ;)

The menu pls