Unreal Motion Graphics (UMG), kullanıcı arayüzleri oluşturmaya yönelik güçlü bir araçtır. İster basit bir açılır pencere ister karmaşık kullanıcı arayüzü sistemleri oluşturuyor ol, UMG’de çalışmanın temel kavramlarını anlamak sana bu güçlü araçta denemeler yapma özgürlüğünü sunar.
Kağıt üzerindeki kullanıcı arayüzü tasarımlarını oynanış testi aşamasına taşıman için UMG’nin kullanıcı arayüzünü nasıl oluşturduğunu anlaman gerekir. Bu sayfa, kullanıcı arayüzü oluşturulmasına ilişkin doğru iş akışlarının sana tanıtılabilmesi için aşağıdaki bölümlere ayrılmıştır:
Kullanıcı Arayüzü Sistemleri Tasarlama
Kullanıcı arayüzü tasarımı planlanması, iyi görünen ve kullanışlı kullanıcı arayüzü sistemleri oluşturmanın anahtarıdır. Şunlar üzerinde düşün:
Oluşturmakta olduğun oyunun türü.
Oyuncuları desteklemek ve oyunun eğlenceli ve kolay anlaşılır olmasını sağlamak için gereken kullanıcı arayüzü türü.
Son kullanıcı arayüzünün nasıl görüneceği.
Örneğin, Fortnite gösterge paneli, oyuncunun oyun hakkında anlaması gereken her şeyi içerir. İlgili can ve kalkan bilgilerinden genel oyun istatistiklerine birçok bilgi ekran geneline yayılmış durumdadır.
Sahip olduğun kullanıcı arayüzü tasarım fikirlerinin taslak çizimlerini yap. Kullanıcı arayüzünün UMG’de nasıl oluşturulacağına ilişkin bir kılavuz olarak bu çizimleri kullan.
Temel web tasarımı yaklaşımları, Kullanıcı Widget’ları oluşturmaya başlamadan önce kullanıcı arayüzünün dizilimini planlamana yardımcı olabilir. Bu yaklaşımlar, kullanıcı arayüzünün hangi parçalarının katı olması gerektiğine, hangi parçalarının ise esnek olabileceğine karar vermek için kullanılabilir. Kullanıcı arayüzü dizilimin için aşağıdaki web tasarımı yaklaşımlarını kullan:
Mutlak Dizilim
Mutlak dizilimlerde, öğelerin ekranda nerelere yerleştirileceğinin belirlenmesi için genellikle kesin hesaplamalar ve koordinatlar kullanılır. Bu yaklaşım, bir kullanıcı arayüzü öğesinin X ve Y koordinatları kullanılarak sabit tutulması gerektiğinde faydalıdır. Kullanıcı arayüzü öğesi için, üst öğenin ekran üzerinde yerleştirildiği konum dikkate alınmalıdır. Üst öğe ise dizilimin sol üst köşesinde başlamaktadır.
Bu dizilim stilinin esnekliği daha azdır ve çeşitli ekran boyutları için korunması zordur.
Mutlak dizilim tasarımı en çok, daha büyük bir tasarımın parçası olan küçük öğeler için kullanışlıdır. Örneğin, bir simge için mutlak bir konum kullan. UEFN’de böyle bir dizilim, Görsel widget’ının Hizalama ve Dolgu ayarları kullanılarak ayarlanabilir.
Simge, etrafındaki diğer kullanıcı arayüzü öğelerinin yerleşiminden ve boyutundan bağımsız olarak aynı yerde kalır.
Göreli Dizilim
Bu dizilim türü en çok birden fazla platformda oynanabilen oyunlar için kullanışlıdır çünkü kullanıcı arayüzünü büyük bir televizyon ekranına veya küçük bir cep telefonu ekranına uyarlayacaktır.
Dolgu ve Aralık Oluşturma
Dolgu, bir bütünün öğeleri arasındaki küçük boşlukları ayarlamak için kullanılabilir. Dolguların UMG’deki her bir widget için yönetilmesi zor olabilir. Bu yüzden dolgu yerine görseller ve metin bloklarına yönelik Hizalama araçlarını kullan. Hizalama, boşluk ve yerleşim üzerinde dolguya göre daha fazla kontrol sağlar.
Buna göre, tüm parçalar yerine yerleştirildikten sonra öğeler arasında hâlâ biraz boşluğa ihtiyacın olması halinde her bir widget’ın dolgu ayarlarını değiştirmen, gerekli alanı ekleyecektir.
Widget’lar arasında daha geniş boşluklar olmasını sağlamak için kapsayıcı widget’ları ile kullanıcı widget’ları arasında boş bir görsel veya yuva widget’ı kullan. Aşağıda, her bir kullanıcı widget’ı arasında boşluk olmasını sağlamak için bir Görsel widget’ının kullanıldığını ve böylece her widget’ın bilgileri net bir şekilde görüntüleyebilmesi için alan sağlanmış olduğunu görebilirsin.
UMG Widget’larını Anlama
UMG’de bir kullanıcı arayüzü bölümler halinde tasarlanmalıdır. Kullanıcı arayüzünü, bireysel kullanıcı widget’ları oluşturarak ve katmanlar halinde çalışarak oluştur. Bir kullanıcı arayüzünün tüm öğeleri hazır olduğunda her bir bölümü tek bir üst kullanıcı widget’ı altında katmanla. Kullanıcı arayüzünü katmanlar halinde oluşturmak, genel olarak kullanıcı arayüzünün tasarımı ve dizilimi üzerinde daha fazla kontrole sahip olmak anlamına gelir.
Bireysel kullanıcı widget’ları planlamak ve oluşturmak için öncelikle Palet panelinde bulunan widget’ları anlaman gerekir. Kapsayıcılar ve öğeler olmak üzere iki ana widget türü vardır.
Kapsayıcılar
Kapsayıcı, kullanıcı arayüzünün bir parçasını oluşturan birden fazla Kullanıcı Widget’ı, öğe ve diğer kapsayıcıları barındırır. Öğe, bir görsel, materyal, metin veya benzeri başka bir şey olabilir. Bir kapsayıcı widget’ının boyutu, en büyük alt öğenin boyutuna göre belirlenir.
| Kapsayıcı Widget | Amaç | Görsel |
|---|---|---|
Izgara | Öğeleri esnek bir ızgara deseni içinde yerleştirir. Alt öğelere şunlar için seçenekler ekler:
|  |
Tek Biçimli Izgara | Alt öğeleri satır ve sütunlar halinde eşit aralıklarla yerleştirir. Alt öğelere şunlar için seçenekler ekler:
|  |
Katman | Öğeleri ve diğer kapsayıcı widget’ları birbirlerinin üzerine katmanlar halinde yerleştirir. Katman kapsayıcılar, alt öğelerine ekstra seçenekler veya ayarlar eklemez. |  |
Yığın Kutuları | Öğeleri yatay veya dikey olarak (soldan sağa, yukarıdan aşağıya) yerleştirir. Bu kapsayıcı widget’ı, öğeler arasında boşluk oluşturma konusunda kendi başına iyi değildir. Bir yığın kutusunda alan oluşturmak için diğer kapsayıcı veya öğe widget’larını kullan. |  |
Boyut Kutusu | Alt öğelerinin boyutunu kısıtlayan parametreler sunar. Boyut kutusu kapsayıcılar, alt öğelerine ekstra seçenekler veya ayarlar eklemez. |  |
Ölçek Kutusu | Kullanıcı arayüzünün ekran boyutuna nasıl ölçeklendirileceğini belirtir. |  |
Kaydırma Kutusu | Bir öğe koleksiyonu içeren kaydırılabilir bir kutu oluşturur. Kaydırma kutusu kapsayıcılar, alt öğelerine ekstra seçenekler veya ayarlar eklemez. |  |
Widget Değiştiricisi | Widget’lar arasında “Sekmelerle geçiş yapmanın” bir yolunu sağlar. Bu kapsayıcı widget’ında, değiştiricide bir defada bir adet widget görünür durumdadır. Widget değiştirici kapsayıcılar, alt öğelerine ekstra seçenekler veya ayarlar eklemez. |  |
Tuval | Öğeleri tanımlı bir alan içinde sabitler. En çok, tasarım sürecinin sonunda üst kapsayıcı olarak kullanılması durumunda kullanışlıdır. Alt öğelerine aşağıdaki seçenekleri ekler:
|  |
Öğe Widget’ları
Tüm widget’lar Görünüm özelliklerine sahiptir ardından Ayrıntılar panelinde seçilen widget’a özgü ayarlar bulunur.
Alt öğelerin boyutu Ayrıntılar panelinde ayarlanabilir ve üst kapsayıcı widget’ından özellikler devralır.
| Öğe Widget’ı | Amaç | Görseller |
|---|---|---|
Eylem Widget’ı | Verse kullanarak, belirli bir eylem için bir girdiyi anahtar bağından almanın yolunu sağlar. Tek başına widget tamamen kozmetiktir. |  |
Görsel | Bir kullanıcı widget’ının arka veya ön planına dokular (içe aktarılmış görseller ya da UEFN’de yerel olarak bulunan dokular olabilir) ve materyaller eklemenin bir yolunu sağlar. |  |
Metin Bloğu | Kullanıcı Widget’ına metin ekler. Boyutu, yazı tipini, boşlukları ve daha fazlasını kontrol edebilirsin.. |  |
Sessize Alma Butonu | Saydam arka planı olan dikdörtgen bir buton. |  |
Normal Buton | Opak arka planı olan dikdörtgen bir buton. |  |
Yüksek Ses Buton | Sarı arka planı olan dikdörtgen bir buton. |  |
Kaydırıcı | Belirtilen aralıkta artım veya azaltım yapan değer kaydırıcısı. |  |
Verse’teki widget’lar hakkında daha fazla bilgi edinmek için Widget Türleri kısmına bakabilirsin.
Kullanıcı Widget’ları Oluşturma ve Katmanlar Halinde Yerleştirme
Kullanıcı widget’ları, tasarladığın her şeyi içeren kullanıcı arayüzü dosyalarıdır. Bir kullanıcı widget’ı oluştururken tasarımını olabildiğince bölümlere ayır. Bu, kullanıcı arayüzü öğen için istediğin görünümü elde etmek için kullanıcı widget’ında yalnızca ihtiyaç duyduğun şeyleri kullanman anlamına gelir.
Aşağıdaki görselde toplanan eşyalar kısayol tuşunun her bir bileşeni için dört kullanıcı widget’ı oluşturulmuştur. Her kullanıcı widget’ı, aynı kullanıcı arayüzü tasarımını korurken farklı bileşenler için ayrı istatistikleri takip eder.
Ayrı kullanıcı widget’larının tasarlanması, bu kullanıcı widget’larının, koleksiyon çubuğu kısayol tuşu için daha tutarlı ve kontrollü bir görünüm oluşturacak şekilde bir üst kullanıcı widget’ı içine katmanlar halinde yerleştirilebileceği anlamına gelir. Takip cihazının koleksiyon kısayol tuşunun her bir bileşenine ilişkin istatistikleri takip etmesi de daha kolaydır.
Görseli büyütmek için tıkla.
Kullanıcı arayüzünü bu şekilde tasarlamak alıştırma gerektirir. Bir oyun için özel bir ekip görünümü oluşturmak üzere bireysel kullanıcı widget’ları oluşturma konusunda alıştırma yapmak için Özel Gösterge Paneli Oluşturma eğitimleri ile Ninja Kaplumbağalar eğitimlerinden faydalan.
Bir Dizilimi Düzenleme
Kullanıcı arayüzü oluşturmak için bireysel kullanıcı widget’ları kullanmak, kullanıcı arayüzünü düzenlemeyi kolaylaştırır ve tek bir parçayı, kullanıcı arayüzü tasarımının diğer parçalarını etkilemeden düzenlemeye yönelik bir yol sağlar.
Yukarıdaki toplama çubuğu kısayol tuşu tasarımında biri hariç tüm öğe etiketlerinin ortalanmış olduğuna dikkat et. Bu durumda geliştirici, yalnızca o öğe için kullanıcı widget’ını açar ve toplama çubuğu kısayol tuşunun diğer tüm öğelerinde soruna neden olmadan etiketi düzenler.
Çanta sistemi gibi daha karmaşık bir şey tasarlıyorsan ihtiyacın olmayan kapsayıcı widget’ları kullandığını veya öğe widget’larının tasarıma uymasını sağlamakta sorun yaşadığını fark edebilirsin. UMG’de bir dizilimi düzenlemeyi kolaylaştıran seçenekler bulunur:
Şununla Değiştir…
Şununla Sar…
Widget’ları Değiştir
Gereksiz widget’ları, Hiyerarşi’den dizilimi bozmadan başka widget’larla değiştir. Gereksiz widget’a sağ tıkla ardından Şununla Değiştir… öğesini seçip ilgili widget’ın yerini alacak başka bir widget seç. İkame widget’ların tamamı kapsayıcı türdeki widget’lardır.
Alt widget’ların seçenekleri, kullanılan yeni üst kapsayıcıya göre değişir.
Widget’ları Sar
Dizilimi, tüm alt widget’ları etkilemeden değiştirmenin bir yolu da Hiyerarşi’deki Şununla Sar... ayarını kullanmaktır. Alt widget’a sağ tıklayıp Şununla Sar... öğesini seç, ardından açılır menüden bir kapsayıcı seçerek onun özelliklerinden faydalan ve alt widget’ların ayarlarını koru.
Oynanış testi
Tasarımın tamamlandıktan sonra tasarımının oynanış testini yap. Aşağıdakileri şartları sağladığından emin ol:
Kullanıcı arayüzü bir amaca hizmet etmektedir. Bir kullanıcı arayüzünü, yalnızca ona sahip olmak için oluşturma; kullanıcı arayüzü faydalı da olmalıdır.
Kullanıcı arayüzü faydalı ve kullanıcı dostudur. Oyuncular, oyun oynarken kullanıcı arayüzünün ne yaptığını tahmin etmek zorunda kalmamalıdır.
Kullanıcı arayüzü oyuna uyum sağlamalı ve oynanışı tamamlamalıdır.
Kullanıcı arayüzü öğelerin oynanışı engellememektedir.