Announcement

Collapse
No announcement yet.

UI Masks

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • UI Masks

    I was designing a textured HP bar for using in my game, but I just noticed that if I were to resize it ingame, the texture would deform.
    In Unity there is a script, for which I don't have the source unfortunately, that solves the problem enabling you to make masks (a shape you can move and transform behind where the actual texture would be put, so you never deform it).

    I haven't seen anything equivalent in WAVE. How could I work around it?

    By the way, I've already tried to make the (red) background appear as HP decreases, but that's not feasible since the bar is not a rectangle, so it would also deform.

  • #2
    Hi guachitonico,

    Actually you can do that. But for doing that you should create a new Layer and draw your HP bar with that layer. A layer can change its renderState (the way it draws), and it also can set a ScissorRectangle, which is used as a mask for that layer. The next code shows a layer where you can set its own Scissoring rectangle.


    Code:
    public class ScissoredLayer : AlphaLayer
    {
        private bool oldScissorTestEnabled;
        private Rectangle oldScissorRectangle;
    
        public Rectangle ScissorRectangle { get; set; }
    
        public ScissoredLayer(RenderManager renderManager)
            : base(renderManager)
        {
        }
    
        protected override void SetDevice()
        {
            base.SetDevice();
    
            this.oldScissorRectangle = this.renderState.ScissorRectangle;
            this.oldScissorTestEnabled = this.renderState.ScissorTestEnabled;
    
            this.renderState.ScissorTestEnabled = true;
            this.renderState.ScissorRectangle = this.ScissorRectangle;
        }
    
        protected override void RestoreDevice()
        {
            this.renderState.ScissorTestEnabled = this.oldScissorTestEnabled;
            this.renderState.ScissorRectangle = this.oldScissorRectangle;
    
            base.RestoreDevice();
        }
    }
    Thank you for using Wave!

    Antonio

    Comment


    • #3
      Thanks! I didn't know you actually had that feature, so far I haven't found anything not doable with WAVE :-).
      How can I draw an image with a Layer? Isn't it UI Image?

      Also, for learning's sake, what does SetDevice and RestoreDevice mean? I haven't touched Layers / Alpha layers at all.

      Comment


      • #4
        Hi there!!

        The ScissoredLayer's works that everyting that is set to this layers it only paint the rectangle you set

        Unfortunately setting layers from de editor is not supported yet, but there is a work arround with the code, in the create scene you can do something like this

        Code:
         protected override void CreateScene()        
        {          
        ...          
        // First register layer                    
        this.RenderManager.RegisterLayerBefore(new ScissoredLayer(this.RenderManager), DefaultLayers.Alpha);          
        
        // Then change my material to this layer          
        var material = this.Assets.LoadModel<MaterialModel>(WaveContent.Materials.HPMaterial);              
        (material.Material as StandardMaterial).LayerType = typeof(ScissoredLayer);          
        ...              
        }
        what is going to be drawed?? What you specified in SetDevice of your custom layer

        Code:
        protected override void SetDevice()    
        {
        ...
        
        // This rectangle is the only thing that is going to be visible for all things assigned this layer
        this.renderState.ScissorRectangle = this.ScissorRectangle;
        
        ....
        }
        Restore device is for undoing the mess :-P

        Comment


        • #5
          Thanks for your help!
          However...I've run into a couple of problems.

          First of all, I can't set the diffuse layer of my material with my assets. The material editor justs crashes without giving me the option to debug. I suspect this is because I'm using alpha, since it doesn't happen with some other materials.
          After that, I tried Assets.LoadModel<MaterialModel>(the actual .png file). It gave me a FileNotFoundException for the file, and suddenly, I can't load the project at all...

          This comes up on project load when I debug:
          Uncontrolled exception of type 'Sytem.DllNotFoundException' at WaveEditor.DXTC.dll
          Additional info: Can't load DLL file 'squish.dll': Can't find specified module (HRESULT exception: 0x8007007E).

          I haven't touched my WAVE installation, everything worked fine just a second ago.
          Is there any way to revert whatever I did wrong??

          EDIT: also when compiling the project from Visual Studio it can't find the .wscene

          Comment


          • #6
            This error comes up when compiling:
            Command WaveExportedCMD.exe (...) exited with code -532462766.

            Comment


            • #7
              Nevermind, there was just some corrupted material, deleting it made the project loadable again.
              I still don't know how to apply a alpha diffuse to a standardmaterial. I tried setting layer type to "AlphaLayer", but it didn't work.

              I also noticed that when I set the material here
              var material = this.Assets.LoadModel<MaterialModel>(WaveContent.M aterials.HPMaterial); (material.Material as StandardMaterial).LayerType = typeof(ScissoredLayer);

              and then apply that material to some mesh, it doesn't draw (i've tried stretching it very far, but it seems that it doesn't draw at all)
              So how can I exactly set the rectangle? I've tried this:
              Code:
               
               protected override void SetDevice()     { this.oldScissorRectangle = this.renderState.ScissorRectangle;
              this.oldScissorTestEnabled = this.renderState.ScissorTestEnabled;
              this.renderState.ScissorTestEnabled = true;
              ScissorRectangle = new Rectangle(100, 100, 400, 400);
              this.renderState.ScissorRectangle = this.ScissorRectangle;
              }
              Last edited by guachitonico; 08-20-2016, 04:25 PM.

              Comment


              • #8
                Looks like the new layer is not registered on the render manager:

                Code:
                ScissoredLayer myLayer = new ScissoredLayer(this.RenderManager);
                myLayer.ScissorRectangle = new Rectangle(0, 0, 400, 400);
                
                this.RenderManager.RegisterLayerAfter(myLayer, DefaultLayers.Opaque);
                
                var material = this.Assets.LoadModel<MaterialModel>(WaveContent.MyMaterial);
                material.Material.LayerType = typeof(ScissoredLayer);
                Let us know if it works

                Hope this helps

                Comment


                • #9
                  Thanks! It works! I also solved the material issue by removing the spaces in the filenames.

                  However, there is just one more problem (the last hopefully).
                  When I use the scissor layer with my AlphaMaterial, lighting disabled, everything in the 2D layer (some are just sprites with no material, or another material) get cropped as well.
                  It's like if the last line (material.Material....) wasn't working.

                  I just don't understand where in the code I specify which ScissoredLayer I want to use, in the code.

                  When you say "material.Material.LayerType = typeof(ScissoredLayer), when I have multiple scissored layers (which I will need to use eventually), where do you specify that you want to use MYLAYER scissoredlayer?

                  If I use a standard material, with lighting enabled and no alpha (don't have time to try it further), I think it works, but I need alpha and NO lighting (it appears dark).

                  Thank you so much for your help, I'm getting further!

                  Comment


                  • #10
                    I've tracked this down to that any alphalayer materials will disappear if outside the scissor rectangle, which is frankly weird for sure.
                    If I change the material's layertype to OpaqueLayer, it works, and will show up outside the scissor rectangle as expected.

                    Also, I've tried changing the material I want to crop away to OpaqueLayer, but that didn't work.

                    So any AlphaLayer materials will disappear when using a ScissorRectangle with your code.

                    If something's not clear please post back and I will explain it in more detail.

                    Comment


                    • #11
                      Hi guachitonico,

                      Yes, it seems we have here a weird behavior with the AlphaLayer materials, could you please provide us a Wave project with minimal code that reproduce the crop problem.
                      Breafly describing what you did, what you expect and what you got.

                      With the repro we can debug it, tackle and fix for you in the nightly build. This will help your if this problem represents a blocker for you, otherwise you could use the OpaqueLayer instead as a temporal workaround.

                      Big thanks for your efforts.
                      We keep in touch.

                      Comment


                      • #12
                        Ok. I had a little problem which I think is caused by the new release. It couldn't restore NuGet packages because there was a WaveEngine.Box2d package which wasn't found in your repository, making me unable to open any new projects. I fixed it by replacing the project package.config by the old project's one.

                        The test project consists of a scissor rectangle which should only cut the RED bar (MyMaterial), but it's also cutting MyMaterial01, which should not happen. Both are partly inside the rectangle, so they are not completely invisible, and you see what's being cropped away.

                        https://mega.nz/#!88RkVawa!vh4HYFC3p...5Xd74GXYQKgb6Y

                        Comment


                        • #13
                          Could you reproduce the issue?

                          Comment


                          • #14
                            Hello, guachitonico.

                            We are still taking a look to this issue, just added it to our backlog for deeper investigation.

                            Regards.

                            Comment


                            • #15
                              Have you found anything worth sharing with us yet?

                              Comment

                              Working...
                              X