Victoria 3’te Arayüz Tasarımı

Victoria 3 geliştirici günlüklerinde bu hafta oyunun arayüzüne dair bilgiler veriliyor.

Merhabalar, ben Kenneth, Victoria 3’te 2 boyutlu çizim şefiyim. Ekibimle birlikte oyunun arayüzünden (UI’dan) sorumluyuz. Bu günlükte UI kelimesi, 3 kategoriden birine mensup bir öğeden bahsedildiği anlamına geliyor: Paneller, Butonlar ve İkonlar. Bu üç kategorideki görseller bir araya gelerek oyunun arayüzünü oluşturuyorlar. Oyuncu, oyun içerisinde edindiği bilginin büyük bir kısmını arayüz üzerinden öğreniyor, verdiği kararları arayüz üzerinden uyguluyor.

Arayüzü oyuncunun kendisini Victoria 3’ün dünyasında hissetmesini sağlamanın bir aracı olarak görüyoruz. Bir önceki geliştirici günlüğünde bahsedildiği üzere, UX ekibi oyunda yer alan devasa miktardaki bilginin erişilebilir ve anlaşılabilir olmasını sağlıyor. Biz de onlarla yakın bir şekilde çalışarak bu bilginin görsel olarak çekici bir şekilde sunulmasını sağlıyoruz.

Tasarım İlkeleri ve Arayüz

Victoria 3’ün sanat tasarımında üç ana ilkeye sahibiz. Bu ilkeler oyunun genel sanat tasarımını şekillendiriyor:

  1. İtibarlı: Arayüz Victoria dönemindeki üst sınıfın gösterişe ve lükse olan düşkünlüğünü yansıtmalı. Aynı zamanda zarif ve seçkin hissettirmeli.
  2. Nostaljik ve Temiz: Burada geçmişin kalitesine atıfta bulunuyoruz, Romantisizm bu yönde bir sanat felsefesine sahip olmamızda belirleyici oldu. Bu akımın 1800’lerde belirmesi ve temiz/huzurlu geçmişin vurgulanması, arayüzde hedeflediğimiz eski günler duygusunu daha iyi yansıtabilmemizi sağladı.
  3. Ayrıntılı ama Anlaşılır: Arayüzlerde yüksek ayrıntıya önem verip, bu ayrıntıların yorucu veya karmaşık görünmesine müsaade etmemeliyiz.

Arayüz Panelleri

Arayüz panelleri her arayüz menüsünün (tam ekran olabilir, açılır pencere şeklinde olabilir veya yanlarda olabilir) temel yapısını ve arkaplanını oluşturur. Oyunda harita dışındaki her şey bir arayüz panelidir.

Arayüz panellerinde Art Nouveau akımını tercih ettik. Art Nouveau büyük oranda doğadan ve doğadaki bitkiler ve çiçeklerin kıvrımlarından etkilenen bir sanat akımı. Bu tercihimiz Nostaljik ve Temiz ilkemizle de uyum içerisinde. Art Nouveau akımı 1800’lü yıllarda toplumun üst kademesinde özellikle mimari yönden tercih edilen bir akımdı. Ayrıntılı yapısı gösterişli fakat bir o kadar da zarif olma ilkemizle uyum sağlıyor. Bu noktada desenleri abartmayıp, arayüzün nihai görevi olan oyuncuya bilgi sunmayı gölgede bırakmamaya önem gösteriyoruz. Bu nedenle ayrıntılı desenler genellikle başlıklarda yer alıyor.

DD30%201.png

Bu gördüğünüz bir arayüz panelidir. Desenler, altın rengiyle birleştiğinde Victoria döneminde öne çıkan duygular olan ihtişam duygusunu hissettiriyor.

Butonlar

Butonlar oyunun ana unsurlarından birisi, oyuncunun direkt olarak etkileşim kurduğu arayüz elemanlarıdır. UX açısından bakıldığında oyuncuların neyin buton olup, neyin buton olmadığını gördüğü gibi anlayabilmesi önem sarfeder. Butonlar ya Yönlendirme butonu (örneğin bir arayüzden bir başka arayüze geçiş) ya da Eylem butonları (tıkladığınızda oyunu etkileyen bir eylemin gerçekleştiği butonlar) şeklindedir. Oyunun temel sanat felsefesini belirlerken, butonlar için de bir şablon oluşturduk.

Butonlara eskimişlik ve nostalji hissini kazandırmak adına tahta desenini tercih ettik. Tüm butonlar Eylem veya Yönlendirme olmalarına göre yeşilin farklı bir tonuna sahip olurlar.

DD30%202.png

Eylem butonları ek olarak altın renginde bir çerçeveye sahiptir.

Bazı arayüzlerde birden fazla butonla karşılaşabilirsiniz. Bu durumda daha öncelikli butona ilginizi çekebilmek için onlara daha “prestijli” bir görüntü oluşturuyoruz. Art Nouveau stiliyle butonun kenarlarına süslemeler ekleniyor.

DD30%203.png

İkonlar

İkonlar Paradox oyunlarında arayüzün çok önemli bir parçasıdır ve bu durum Victoria 3’te de geçerli. Oyunda farklı ikonlar farklı şekillere, büyüklüklere, tarzlara ve renklere sahipler. Bunları mekanikler, istatistikler ve özellikler gibi farklı unsurları betimlemek için kullanabiliyoruz. Aşağıda ikon kullandığımız farklı unsurlardan bahsedeceğim.

Binalar ve Mallar

Bu ikonlar oyundaki en ayrıntılı ve görsel olarak çekici ikonları oluşturuyor. Bunlar oyun dünyasındaki varlıkların görsel birer betimlemesi şeklinde, her biri küçük bir çizim ve nihai olarak oyuncuyu oyun dünyasına çekme, onların hayalgücünü besleme amacı taşıyorlar.

DD30%204.png

Olaylar, Teknolojiler ve Nüfus Grupları

Oyunda ‘Akademi’ hem de ‘Dinamit’ teknolojisi var, bunlardan birisi gerçek bir öğeyken diğeri daha soyut bir kavram. Peki bu şekilde farklılıklar içerebilen unsurların ikonlarını nasıl tasarlıyoruz? Teknoloji ve olay ikonlarında, soyut bir kavramı temsil eden gerçek dünyadan öğe veya öğeler kullanıyoruz. Bu ikonların büyük bir kısmı, bir ikon için oldukça büyük olduğu için daha ayrıntılı ve gerçekçi çizimler ortaya çıkarabiliyoruz. Dinamit teknolojisinde basitçe bir dinamit çizimi bulunurken, Protesto olaylarında bu soyut kavramı temsilen eski tür bir megafon bulunuyor.

DD30%205.png

Nüfus Grupları karakter modelleri ve ikonlarla temsil ediliyor. Karakter modellerini küçülterek kullanmamız zor olacağı için, bu noktada ikonlar desteğe geliyor. Bu durum Nüfus İkonları için de geçerli, örneğin Makine Ustası için İngiliz Anahtarı sembolü kullanılıyor.

DD30%206.png

Bahsedeceğimiz son ikon grubu, oyun mekaniklerini, onların kategorilerini, özellikleri ve istatistikleri temsil eden ikonlar. Bu ikonlar genellikle birden fazla arayüzde yer alıyorlar ve bir ikon için pek de büyük değiller. Bulundukları arayüze göre farklı boyutta olabildikleri için, küçük olduklarında da anlaşılabilir ve tanınabilir olmaları gerekli. Bu sebeple bu ikonlardaki ayrıntı seviyesi diğer ikonlara nazaran daha az olup, belli başlı renklere ve silüetlere odaklanılıyor.

DD30%207.png

DD30%208.png

Bu ikonlarda renk kodlaması yaparak daha kolay anlaşılabilmelerini sağlayabiliyoruz. Bir unsur pozitifse yeşil renkte, negatifse kırmızı renkte olabiliyor.

DD30%209.png

Çıkar Grupları renk kodlaması olarak daha komplike bir örnek. Oyuncular hangi rengin hangi çıkar grubuna denk düştüğünü ilk başta fark edemeyebilir fakat zaman içerisinde bu renkleri çıkar gruplarıyla ilişkilendireceğinizi umuyoruz. Lensler de bu şekilde renk ayrımlarına sahip.

DD30%2010.png

Eğitim Modu

Bir önceki geliştirici günlüğünde Aron ve Henrik eğitim modundan bahsetti. Bu kısımda oyuncuların inanılamz derecede derin ve komplike mekanikleri anlamasında çizimlerin görevinden bahsedeceğim. Bilgi çubukları, metinler ve infografiklerle oyun mekaniklerini daha iyi anlatabileceğimizi düşünüyoruz. İnternette denk geldiğiniz birçok infografik (Googlelayabilirsiniz) temiz, kendisine has ve modern bir görünüme sahip. Bu noktada bunu Victoria dönemine daha uyumlu hale getirip, sanat ilkelerimiz droğultusunda oyuncunun dönemi daha etkili bir şekilde hissedebilmesini sağlamayı amaçlıyoruz. Bu doğrultuda dönemin gazete çizimlerinden baskı çizimlere kadar birçok öğeden ilham alıp, kendi infografiklerimizde bunu uyguladık. Son olarak bu çizimleri eskimiş görünen bir kağıt üzerine yerleştirdik.

DD30%2011.png

Bugünlük benden bu kadar, önümüzdeki hafta İçerik Tasarım Şefimiz Daniel sizlere Journal Entry adını verdiğimiz özellikten bahsedecek.

Yazar: Ali Alper Duman

Yayın Direktörü @ Strategyturk

Yorumla

STRATEGYTURK

Strategyturk'te strateji oyunlarından haberleri, yama notlarını, geliştirici günlüklerini ve daha birçok içeriği Türk strateji oyuncularına Türkçe bir biçimde sunuyoruz. Aynı zamanda yeni çıkan strateji oyunlarının ve eklentilerinin incelemelerini yapıyor, bu oyunlara dair sürekli olarak içerik oluşturuyoruz.

Sosyal medya sayfalarımızı takip ederek strateji oyunlarındaki gelişmelerden haberdar olabilirsiniz.

Son Yorumlar

  • mahmut: ne zaman güncellenecek ? tarih verin bari
  • Ali: Yeni yamayı bekliyoruz , elinize sağlık

KATEGORİLER

ARŞİV