Wintermute Engine Forum

Wintermute Engine => Technical forum => Topic started by: SOLO on October 18, 2013, 02:18:37 PM

Title: Animated Inventory
Post by: SOLO on October 18, 2013, 02:18:37 PM
         I was wondering if it is possible to have an inventory animate initially and then the items fade in, so for example sake the player moves the mouse cursor to the top of the screen and a scroll unwinds down adn then the items appear after the scroll (inventory) is fully open.

I know how to fade the items in but cannot get the animation first then the fade in to happen, the inventory fades in as the scroll is unfolding and it looks wrong.

Thanks for any help on this...

Title: Re: Animated Inventory
Post by: 2.0 on October 18, 2013, 08:12:44 PM
Or I misunderstood a question, or...

Code: WME Script
  1. function Unfolding()
  2. {
  3.   HideItems();
  5.   // Then here you unfolding the inventory
  7.   ShowItems();
  8. }
  10. function HideItems()
  11. {
  12.   // Here you hiding items
  13. }
  15. function ShowItems()
  16. {
  17.   // Here you showing items
  18. }
Title: Re: Animated Inventory
Post by: SOLO on October 22, 2013, 05:32:39 PM
Hi thanks 2.0,

    I have this at the moment - not great on scripting and still learning
This is my INVENTORY script so it fades in and out.

#include "scripts\"

global Faded;

method FadeIn()
 Game.InventoryVisible = true;
 for(var i=1; i<=10; i=i+1)
    this.AlphaColor = MakeRGBA(255, 255, 255, 25*i);
 this.AlphaColor = MakeRGBA(255, 255, 255, 255);
 Faded = true;

method FadeOut()
  for(var i=10; i>=1; i=i-1)
    this.AlphaColor = MakeRGBA(255, 255, 255, 25*i);
 this.AlphaColor = MakeRGBA(255, 255, 255, 0);
 Game.InventoryVisible = false;
 Faded = false;

Any help would be great on the scripting

Title: Re: Animated Inventory
Post by: anarchist on October 22, 2013, 06:40:48 PM
Hello Solo,

I have some code which might be useful to you, though I am not certain this is what you need.

My inventory window is placed at the bottom of the screen. It is invisible until you move your mouse up to a certain position, which the game_loop.script catches and calls my custom functions (this is what you also do I assume). My inventory window then starts to fade in and at the same time move upwards, until it reaches the correct position and then fully fades in:

Code: WME Script
  1. #include "scripts\"
  3. var alfa = 255;
  4. var inventoryFade;
  5. var position;
  6. ////////////////////////////////////////////////////////////////////////////////
  7. method FadeIn()
  8. {
  9.         position = 755;
  10.         if (inventoryFade == false){
  11.                 for (alfa=0; alfa<255; alfa=alfa+10){
  12.                         this.AlphaColor = MakeRGBA(255,255,255,alfa);
  13.                         this.SkipTo(0,position);
  14.                         position = position -1;
  15.                         Sleep(15);
  16.                 }
  18.                 inventoryFade = true;
  19.         }
  20.         position = 728;          
  21.         this.AlphaColor = MakeRGBA(255, 255, 255, 255);  
  22. }
  24. method FadeOut()
  25. {
  26.         position = 730;
  27.         if (inventoryFade == true){
  28.                 for (alfa=254; alfa>1; alfa=alfa-10){
  29.                         this.AlphaColor = MakeRGBA(255,255,255,alfa);
  30.                         this.SkipTo(0,position);
  31.                         position = position +1;
  32.                         Sleep(20);
  33.                 }
  35.                 inventoryFade = false;
  36.         }
  37.         this.AlphaColor = MakeRGBA(255, 255, 255, 0);
  38. }

The "position" values can of course be modified depending on the resolution you use. The code is not mine, I found it on this forum but I cannot remember in which thread and I cannot locate it. If what you want is instantly show the items after fade in, I think you need to remove and re-add them.
Title: Re: Animated Inventory
Post by: SOLO on October 23, 2013, 03:18:52 PM
Hi anarchist,
                  Yes I have done the same but what I really want is an animated sprite to run first (shows INVENTORY graphic with no items unrolling) and then the fade in of the REAL INVENTORY.

When the player moves the cursor away from the inventory the REAL INVENTORY fades (items fade) it shows the animated sprite behind and then runs another sprite to roll the inventory up.

so to recap you have x1 start inventory sprite (fake) no interaction
                               THE REAL INVENTORY fading in
                               THE REAL INVENTORY fading out
                               x1 end inventory sprite (fake) no interaction   

Hope this makes it simpler to understand, look at it as a book opening (start sprite) then the words appear (inventory items) , then when finished the words fade (inventory items) and the book closes (end sprite)

I can doo all the graphical stuff but the code is another issues hahahahahaha  :D

Thanks for all your help forum!