koobas.hobune.stream
Drawing a texture partially
Hey guys!
I'm making a power bar as a part of GUI. The power of shot will be calculated based on how long player is holding the fire button, and the bar will display the scale. I'm trying to achieve it with two textures of the same size.
Look at the picture.
The first (bottom) texture is for backing, and the other is for scale itself. The scale is partly transparent, and is drawn on the top of the backing. I'm going to clip the top texture with a rectangle which height will be calculated. I want just to display the lower part of the scale texture, not to stretch it, not to center it (marked desired result on the picture). But I can't find the way to do this.
The best I get is a very creepy thing (marked what i actually get on the pic). I use GUI.DrawTexture method with a scale mode ScaleMode.ScaleAndCrop, but what it does is moving the texture's center to the rectangle's center point (but i need moving the lower-left texture's angle to the rectangle's lower-left angle).
I wonder, is there a solution at all? I tried playing with Texture2D's set/get pixels, but it not an option because of its enormous impact on performance.
Here is the code that I'm using at the moment
// [field declarations] textures for fire power scaling public Texture firebarBottom; public Texture firebarScale;
...
// [inside OnGUI method] Where to draw fire bar
rect = new Rect(sidebarX + firebarX, firebarY,
firebarBottom.width, firebarBottom.height);
float offset = rect.height * (1 - powerScale);
// Rectangle for drawing firebar scale texture. Its height depends on shot power
Rect rect2 = new Rect(rect.x, rect.y + offset, rect.width, rect.height - offset);
GUI.DrawTexture(rect, firebarBottom);
GUI.DrawTexture(rect2, firebarScale, ScaleMode.ScaleAndCrop);
Thanks everyone!
the default value for GUI.DrawTexture is this:
GUI.DrawTexture (position : Rect, image : Texture, scale$$anonymous$$ode : Scale$$anonymous$$ode = Scale$$anonymous$$ode.StretchToFill, alphaBlend : bool = true, imageAspect : float = 0)
as you can see it has:
Scale$$anonymous$$ode = Scale$$anonymous$$ode.StretchToFill
I think to get your desired result you need to change the Scale$$anonymous$$ode to Scale$$anonymous$$ode.ScaleAndCrop
hope this helps
Scribe
P.S one up for nice picture representation
Thanks Scribe, I used Scale$$anonymous$$ode.ScaleAndCrop for drawing a scale (last line of code), but it leaves the center part of the texture in the clipping rectangle, not the bottom part.
I've just found an answer to the similar question on forum
http://forum.unity3d.com/threads/69296-GUI-Life-Bar-Spherical
I've also found two good threads with related discussions for more advanced effects http://forum.unity3d.com/threads/28110-Masking-off-certian-portions http://forum.unity3d.com/threads/26945-Diablo-style-health-orb
using UnityEngine; using System.Collections;
public class GaugeBar : $$anonymous$$onoBehaviour {
Rect groupRect;
Rect barRect;
public Texture barTexture;
public float speedValue = 0;
void Awake(){
barRect = new Rect( 0, 0, barTexture.width, barTexture.height );
groupRect = new Rect( 100, 0, 0, barTexture.height );
}
void OnGUI(){
groupRect.width = speedValue;
GUI.BeginGroup( groupRect );
GUI.DrawTexture( barRect, barTexture );
GUI.EndGroup();
}
}
/*
var groupRect : Rect;
var barRect : Rect;
public var barTexture : Texture;
public var speedValue : float = 0;
function Awake(){
barRect = Rect( 0, 0, barTexture.width, barTexture.height );
groupRect = Rect( 100, 0, 0, barTexture.height );
}
function OnGUI(){
groupRect.width = speedValue;
GUI.BeginGroup( groupRect );
GUI.DrawTexture( barRect, barTexture );
GUI.EndGroup();
}
*/
GaugeImage: http://www.freeimagehosting.net/image.php?49c1692c1f.png
I hope this helps somebody...
Using GUI.DrawTextureWithTexCoords
Parameters
position: Represent position and "total" size of texture. texCoords: Use percentage per unit. Relative Left-Lower corner, and relative scale.
Axes Origin
OnGUI origin is Left-Upper corner: position parameter use this origin. But, in DrawTextureWithTexCoords the origin is Left-Lower corner: texCoords use this origin.
With texCoords parameter you can crop(percentage between 0-1) or tile image (width or height upper to 1).
To maintain aspect, also you must change "total" size of texture(position parameter).
Before this, you need save texture initial size(width,height).
using UnityEngine;
using System.Collections;
[ExecuteInEditMode]
public class NewBehaviourScript : MonoBehaviour {
public Texture image;
[Range(0f,1f)]
public float x=0f;
[Range(0f,1f)]
public float y=0f;
[Range(0f,1f)]
public float width=1f;
[Range(0f,1f)]
public float height=1f;
float initialWidth,initialHeight;
bool imageEnabled=false;
void Update(){
if(!this.imageEnabled) if(this.image!=null){
this.initialWidth = this.image.width;
this.initialHeight = this.image.height;
this.imageEnabled=true;
}
}
void OnGUI(){
if(imageEnabled){
Rect position = new Rect(0f,0f,this.initialWidth*this.width,this.initialHeight*this.height);
Rect coords = new Rect(this.x,this.y,this.width,this.height);
GUI.DrawTextureWithTexCoords(position,this.image,coords);
}
}
}
Here's my attempt. Also uses GUI.DrawTextureWithTexCoords, probably about the same as what IsGreen did.
using UnityEngine;
using System.Collections;
public class PowerBarScript : MonoBehaviour {
public Texture PowerBarTexture;
public Vector2 PowerBarPosition;
public Vector2 PowerBarSize;
private float powerRatio = 0.5f;
void Update() {
Debug.Log(PowerBarTexture.height);
if(Input.GetKey(KeyCode.W)) {
powerRatio += 0.01f;
if(powerRatio > 1)
powerRatio = 1f;
}
if(Input.GetKey(KeyCode.S)) {
powerRatio -= 0.01f;
if(powerRatio < 0.01)
powerRatio = 0.01f;
}
}
void OnGUI() {
GUI.DrawTextureWithTexCoords(new Rect(PowerBarPosition.x, PowerBarPosition.y - (PowerBarSize.y * powerRatio), PowerBarSize.x, PowerBarSize.y * powerRatio), PowerBarTexture, new Rect(0, 0, 1, 1 * powerRatio));
}
}
