Codierung für die HoloLens mit Unity 5 – Teil 8 – Hinzufügen eines Bildes zum HUD (und anschließendes Ändern im C#-Code)

Codierung für die HoloLens mit Unity 5 – Teil 8 – Hinzufügen eines Bildes zum HUD (und anschließendes Ändern im C#-Code)

Letztes Mal haben wir uns mit der Erstellung eines einfachen HUD für die HoloLens befasst und Text mit unterschiedlichen Farben in jeder der Ecken des sichtbaren Bildschirms angezeigt.

Natürlich möchten Sie nicht immer nur Text auf Ihrem HUD haben – also schauen wir uns dieses Mal eine sehr einfache Erweiterung davon an – das Hinzufügen eines Bildes zum HUD.

Nehmen wir das dort auf, wo wir den letzten Beitrag verlassen haben. Wir haben bereits ein HUD mit Text in den vier Ecken erstellt, wie im Emulator unten gezeigt.

Angenommen, wir möchten einen visuellen Hinweis hinzufügen – zum Beispiel ein Statussymbol, das anzeigt, ob eine WLAN-Verbindung besteht.

Ich werde das rote Text-UI-Element unten rechts in der Anwendung löschen, da ich mich entschieden habe, dass mein Bild dort angezeigt werden soll.

Jetzt möchte ich der Leinwand ein neues UI-Element hinzufügen – insbesondere ein RawImage-Element. Sie können dies aus dem Kontextmenü auswählen, wie unten gezeigt.

Dadurch wird Ihrer Leinwand nur ein neues leeres weißes Bild hinzugefügt, wie in der Szene unten gezeigt.

Wir müssen dieses Rohbild natürlich anpassen, damit es die richtige Position und Größe hat und die richtige Quelle hat. Wir können all dies im Inspector-Panel tun. Das folgende Panel zeigt die Standardeinstellungen meiner Version von Unity.

Zuerst möchte ich die Position des Bildes so ändern, dass es sich rechts unten auf der Leinwand befindet. Ich kann dies tun, indem ich auf das Positionssymbol klicke (der Teil, der wie ein Fadenkreuz oben links im Bild oben aussieht). Sobald ich darauf geklickt habe, drücke ich „Alt“ auf der Tastatur, um ein alternatives Menü zu erhalten, das unten gezeigt wird.

Mit der Maus wähle ich das Symbol – hervorgehoben durch ein rotes Kästchen oben – aus, das das Bild rechts unten auf der Leinwand positioniert.

Jetzt muss ich ein Bild zum Hinzufügen auswählen – ich habe ein Bild einer Wolke, das ich verwenden werde, um eine Verbindung zur Cloud anzuzeigen. Dieses Bild ist 100 x 100 Pixel groß, es ist ein PNG und hat einen transparenten Hintergrund.

Zuerst erstelle ich einen neuen Ordner mit dem Namen „Resources“ unter Assets in der Unity-Projektansicht. Dann klicke ich mit der rechten Maustaste, wähle „Neues Asset importieren…“ und navigiere zu dem Ort, an dem ich das Cloud-Bild gespeichert habe.

Jetzt wähle ich das RawImage-Objekt aus, das unter dem Main Canvas-Objekt gespeichert ist, damit ich das RawImage Inspector-Bedienfeld sehen kann. Im Moment ist die Texture-Eigenschaft von RawImage leer, aber als Nächstes ziehe ich das Bild aus dem Ressourcenordner auf die Texture-Eigenschaft.

Das Bild unten zeigt das auf unserer HUD-Leinwand gerenderte Wolkenbild.

Wenn wir dies jetzt erstellen und im Emulator bereitstellen, sehen Sie das Cloud-Bild in Ihrem HUD.

Bild im Code ändern

Manchmal möchten wir unser Bild im Code ändern, da das Ziehen des Bilds aus dem Ressourcenordner in das Inspektor-Bedienfeld zur Entwurfszeit nicht flexibel genug ist.

Glücklicherweise ist dies im Code ziemlich einfach – wir müssen nur definieren, welches Bild (oder in Unitys Begriffen, welche „Textur“) wir anzeigen möchten, und die Textur des RawImage so einstellen.

Zuerst füge ich der Szene ein neues GameObject mit dem Namen „ScriptManagerCollection“ hinzu.

Dann füge ich meinem Ressourcenordner ein weiteres Bild mit dem Namen „NotConnected.png“ hinzu – dieses Bild verwende ich, wenn das WLAN nicht verbunden ist.

Als Nächstes füge ich den Assets ein neues C#-Skript mit dem Namen „ImageManager“ hinzu. Ich habe ImageManager in Visual Studio geöffnet und den folgenden Code hinzugefügt.

using UnityEngine.VR.WSA.Input;
using UnityEngine.UI;
 
public class ImageManager : MonoBehaviour {

    GestureRecognizer recognizer;
 
    public RawImage wifiConnection;
 
    // Use this for initialization
    void Start () {
        recognizer = new GestureRecognizer();
 
        recognizer.TappedEvent += Recognizer_TappedEvent;
 
        recognizer.StartCapturingGestures();
    }

    private void Recognizer_TappedEvent(InteractionSourceKind source, int tapCount, Ray headRay)
    {
        var myGUITexture = (Texture2D)Resources.Load("NotConnected");
 
        wifiConnection.texture = myGUITexture;
    }
}

Sie können sehen, dass ich einen einfachen Code geschrieben habe, der eine Tipp-Geste erkennt und die Quelle des wifiConnection-Bildes in „NotConnected.png“ ändert.

Ich habe dieses Skript auf das ScriptManagerCollection GameObject in Unity gezogen und dieses GameObject ausgewählt. Der Inspector wird aktualisiert und zeigt eine öffentliche RawImage-Eigenschaft namens „Wifi Connection“ an. Ziehen Sie das RawImage-Objekt von der Leinwand im Hierarchiefenster auf diese Eigenschaft.

Jetzt kann ich dieses Projekt erstellen und im HoloLens-Emulator ausführen.

Wenn die Anwendung zum ersten Mal ausgeführt wird, wird das Wolkensymbol unten rechts auf dem Bildschirm angezeigt:

Und wenn ich eine Klick-Geste nachahme, ändert sich das Bild in das „Nicht verbunden“-Wolkensymbol.

Schlussfolgerung

So können wir jetzt Bilder – und wechselnde Bilder – in unser HUD für die HoloLens integrieren. Das nächste Mal werde ich mich mit der Erstellung einer vollständigen Anwendung für die HoloLens befassen, indem ich einige der Tutorials verwende, die ich in den letzten Wochen erstellt habe.