'Tatil Simülatörünün' VR Paintbrush Tech PlatoBlockchain Veri Zekasının Şaşırtıcı Parlaklığı. Dikey Arama. Ai.

'Tatil Simülatörünün' VR Paintbrush Tech'in Şaşırtıcı Parlaklığı

'Tatil Simülatörünün' VR Paintbrush Tech PlatoBlockchain Veri Zekasının Şaşırtıcı Parlaklığı. Dikey Arama. Ai.

Her zaman popüler olanı piyasaya sürmek iş simülatörü 2016'da HTC Vive için bir lansman başlığı olarak Owlchemy Labs, bugün var olan en tecrübeli VR oyun stüdyolarından biridir. Yıllar geçtikçe stüdyo, en yeni başlıklarında görülen güçlü bir VR etkileşim tasarımı temeli oluşturdu. Tatil Simülatörü. Oyuncuya basit ve kullanışlı görünebilecek etkileşimler genellikle göründüklerinden çok daha karmaşıktır. Örnek olarak: şaşırtıcı derecede parlak bir fırça teknolojisi sadece doğru hissettiriyor VR'de. Owlchemy'den geliştiriciler, onu nasıl inşa ettiklerini açıklamak için buradalar.

'Tatil Simülatörünün' VR Paintbrush Tech PlatoBlockchain Veri Zekasının Şaşırtıcı Parlaklığı. Dikey Arama. Ai.Peter Galbraith ve Zi Ye'nin Konuk Makalesi

Peter (Birliklerin Uygulayıcısı) ve Zi (Geliştirici, Fizik / Matematik Genius), her ikisi de geliştirici / tasarımcı çift kullanıcılardır. Owlchemy Labs. Çalışmaları tasarım düşüncesi ve prototip oluşturmadan yinelemeye, programlama uygulamasına ve teste kadar uzanır.

'Tatil Simülatörünün' VR Paintbrush Tech PlatoBlockchain Veri Zekasının Şaşırtıcı Parlaklığı. Dikey Arama. Ai.Her ikisi de Owlchemy Labs'deki absürt ve son derece şık sanal oyunların mirasına önemli katkılarda bulunuyor: ödüllü oyun iş simülatörü, Emmy adayı Rick ve Morty: Sanal Rick-alityve yakın zamanda yayınlanan Tatil Simülatörü, PSVR ve Oculus Quest'e de bu yılın sonlarında geliyor.

Herkese merhaba!

Pete ve Zi burada. İkimiz de Owlchemy Labs'deki geliştiriciyiz ve sizinle en çok yinelenen özelliklerden biri hakkında konuşmaktan heyecan duyuyoruz. Tatil Simülatörü: Boyama!

Orman seviyesindeki en renkli etkinliklerimizden biri olan resim yapmak, bir Ağaç Evinde gizlenmiş yaratıcı bir alan ve içinizdeki sanatçıyı serbest bırakabileceğiniz. İster sıfırdan bir başyapıt yapmak için süper yapışkan boya fırçamızı kullanın, ister oyun içi Kameradan bir fotoğrafı başlangıç ​​noktası olarak kullanın, estetik mükemmellik her zaman elinizin altındadır. Ancak, tüm harika özellikler gibi, Resim mükemmel resim sonucumuza ulaşmadan önce birkaç prototip ve yinelemeden geçti.

Başlamak için Zi, bir sanatçının araç setinin en önemli kısmının arkasındaki teknolojiyi açıklayacak: boya fırçası!

[PAINTBRUSH] Hissini Simüle Etmek

Resim yapmayı harika hissettirmenin en zorlu yönlerinden biri fırça ucuydu. Resimdeki yaratıcı vizyonunuzu ifade edecek tek ve güçlü aracımız olarak, VR'de bir fırça kullanmanın getirdiği beklentileri en teknik ayrıntıya kadar ele almamız gerektiğini biliyorduk.

Oyunlarımızdaki en iyi özellikler gibi, yumuşacık fırça ucu da sahte, uydurma fizik kullanılarak oluşturuldu! Tuvale çektiğimiz düz bir çizgiden oluşan matematiksel bir modelle başlıyoruz ve ardından ucun yüzey boyunca nerede büküleceğini buluyoruz. Bu eğik çizgi, aşağıdaki gibi fırçanın şeklini değiştirmek için kullanılır:

Bu, VR'de resim yaparken karşılaştığımız en büyük sorunlardan birini çözmemize yardımcı oldu: geri bildirim eksikliği. Mevcut VR donanımıyla, tuvale baskı yapan esnek bir fırçanın geri bildirimini doğru bir şekilde simüle edemiyoruz. Bu geri bildirim olmadan, oyuncuların fırçanın temas edip etmediğini anlamasının zor olduğunu gördük, bu da fırçayı tuvalin çok uzağına yerleştiriyor ve fırça resim şövale ile çarpışırken titrek veya hıçkırık hareketleri yaratıyor. Bu davranış birçok 'dalgalı çizgiye' yol açtı ve çoğu zaman fırçanın oyuncuların ellerinden tamamen aşırı çarpışmalardan kopmasına neden oldu - bu tam olarak oyuncularımızı sanat profesyonelleri gibi hissettiren bir şey değil!

Yumuşacık uç şeklinde görsel geri bildirim sağlayarak, daha az oyuncu fırçayı tuvalin içine kadar itti, bu da daha az kırılma ve daha güzel çizgiler oluşturdu. Fırçanın yaptı Oyuncunun elinden koparak hem oyuncunun fırçasını tutması hem de yapmadıysa tekrar tutması daha kolay hale gelir.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { min-height: 100px; pozisyon: göreceli; } .IRPP_kangoo , .IRPP_kangoo:hover , .IRPP_kangoo:ziyaret edilen , .IRPP_kangoo:aktif { border:0!important; } .IRPP_kangoo { görüntü: blok; geçiş: arka plan rengi 250ms; webkit geçişi: arka plan rengi 250ms; genişlik: %100; opaklık: 1; geçiş: opaklık 250ms; webkit geçişi: opaklık 250ms; arka plan rengi: #e6e6e6; kutu gölgesi: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .IRPP_kangoo:active , .IRPP_kangoo:hover { opaklık: 1; geçiş: opaklık 250ms; webkit geçişi: opaklık 250ms; arka plan rengi: #FFFFFF; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { arka plan konumu: merkez; arka plan boyutu: kapak; yüzer: sol; kenar boşluğu: 0; dolgu: 0; } .IRPP_kangoo .postImageUrl { genişlik: %30; } .IRPP_kangoo .imgUrl { genişlik: %100; } .IRPP_kangoo .centered-text-area { kayan nokta: sağ; genişlik: %70; dolgu:0; kenar boşluğu:0; } .IRPP_kangoo .centered-text { ekran: tablo; yükseklik: 100 piksel; sol: 0; üst: 0; dolgu:0; kenar boşluğu:0; } .IRPP_kangoo .IRPP_kangoo-içerik { ekran: tablo hücresi; kenar boşluğu: 0; dolgu: 0 10px 0 10px; pozisyon: göreceli; dikey hizalama: orta; genişlik: %100; } .IRPP_kangoo .ctaText { border-bottom: 0 katı #fff; renk: #000000; yazı tipi boyutu: 13 piksel; yazı tipi ağırlığı: kalın; harf aralığı: .125em; kenar boşluğu: 0; dolgu: 0; metin-dekorasyon: altı çizili; } .IRPP_kangoo .postTitle { renk: #2C3E50; yazı tipi boyutu: 16 piksel; yazı tipi ağırlığı: 600; kenar boşluğu: 0; dolgu: 0; } .IRPP_kangoo .ctaButton { arka plan rengi: #FFFFFF; sol kenar boşluğu: 10 piksel; konum: mutlak; sağ: 0; üst: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-dönüşümü: ölçek(1.2); -moz-dönüşüm: ölçek(1.2); -o-dönüşüm: ölçek(1.2); -ms-dönüşüm: ölçek(1.2); dönüştürme: ölçek(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition: -webkit-transform 0.4s giriş-çıkış kolaylığı; -moz-geçişi: -moz-dönüşüm 0.4s kolay giriş-çıkış; -o-geçiş: -o-dönüşüm 0.4s kolay giriş-çıkış; -ms-geçişi: -ms-dönüşüm 0.4s giriş-çıkış kolaylığı; geçiş: 0.4s kolay giriş çıkışını dönüştürün; } .IRPP_kangoo:sonra { içerik: “”; Ekran bloğu; ikisini de temizle; }

AYRICA BAKINIZ
Özel: 'Lone Echo' ve 'Echo Arena'nın' Sanal Dokunmatik Ekran Arayüzlerini Tasarlamak

Ama yine: hepsi sahte! Fırça kılları, en temel dışında fizik sisteminde çarpışmaz. Ezme eylemi, direnç yanılsaması yaratır ve oyuncuyu fırçanın geri itildiğini düşünmesi için kandırır.

Fırçanın temas alanının boyutunu belirlemek ve tuvale uygulanan boya dobunun boyutunu kontrol etmek için de aynı matematiksel modeli kullanıyoruz. Bu özel özellik, sadece değişken strok genişliğiyle tek bir fırça boyutuyla göndermemizi sağladı: ince ve hassas bir çizgi için hafifçe dokunun veya daha sıkı bir geçişle renkler üzerinde çubukla.

Fırça ayrıca, tuval üzerine sürüklendiğinde veya fırça tutacağı döndürüldüğünde fırçanın yönünün nasıl değiştiğini belirleyen 'tüy sertliğini' de etkiler. Sertlik, tuval ile temas halinde olmadığında fırça kıllarına biraz titreme eklemek için de kullanılır. Bu küçük detaylar, fırça için süper bir "yapışkan" his almamızı sağladı ve ilk oyun testimizden insanların bu algılanan hislere gerçekten tepki verdiği açıktı.

Yumuşacık fırça birçok teknik ve kullanıcı deneyimi sorununu çözdü ve aynı zamanda oyuncuları güzel sanat eserleri yaratma konusunda güçlendirmek için bu ilk arzuyu yerine getirdi. "Sanatçı olmadıklarına" inanan birkaç geliştiricimiz vardı, ancak yeni resim şövale önüne konduğunda şuna benzer şeyler yaptı:

'Tatil Simülatörünün' VR Paintbrush Tech PlatoBlockchain Veri Zekasının Şaşırtıcı Parlaklığı. Dikey Arama. Ai.

Fırça ucundaki kaligrafi boyut değişiklikleri, sanatçımızın özenle seçilmiş paleti ile birleştiğinde, herkesin ressamca ve eğlenceli görünen resimler oluşturmasına olanak tanıyor. Voila!

Şimdi, Painting'e kod koyan ilk geliştirici olarak Pete, özelliğin arkasındaki tasarım sürecimizi paylaşacak (birçok yinelemesi dahil!):

Tasarım Zorlukları: Çizim Tahtasına Geri Dön!

İçindeki her özellik Tatil Simülatörü aynı soru dizisinden başladı:

  • İnsanlar belirli bir destinasyonda tatil yaptıklarında ne beklerler?
  • Botlar bu etkinliği komik bir şekilde nasıl yanlış yorumlayabilir?

Eskiz, resim ve sanatçılığın doğaya girmenin eğlenceli yönleri olduğunu biliyorduk ve Botların resmi nasıl yanlış yorumlayacağını düşündüğümüzde, fotoğrafları manipüle etmek hemen aklımıza geldi. Ada çevresinde çektiğiniz fotoğrafları düzenleme ve bir oyuncu olarak kendinizi ifade edecek şekilde özelleştirme fikrini sevdik. Bu basit fikir, tasarlanması ve hayata geçirilmesi bir yıldan fazla süren bir özelliğin tohumuydu.

'Tatil Simülatörünün' VR Paintbrush Tech PlatoBlockchain Veri Zekasının Şaşırtıcı Parlaklığı. Dikey Arama. Ai.
İş Simülatörü (2016)

İlk tasarım fikirlerimizin bir kısmı, daha önce yaptığımız şeyden etkilendi iş simülatörü (örneğin Auto Mechanic'te tabelayı boyamak; Office bilgisayarındaki boyama yazılımı). İkisi de basit ve eğlenceliydi, ancak çok derin değildi. İçinde boyama Tatil Simülatörü oyunun geri kalanına uyması için farklı ve daha büyük hissetmek zorundaydı. Oyunculara piksel yoğunluğunun artırılmasından fazlasını vermek istedik, şunları yapabilmelisiniz hissetmek Aslında resim yapıyormuşsun gibi. Gerçek hayat gibi, sadece daha iyi.

.IRPP_kangoo , .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl , .IRPP_kangoo .centered-text-area { min-height: 100px; pozisyon: göreceli; } .IRPP_kangoo , .IRPP_kangoo:hover , .IRPP_kangoo:ziyaret edilen , .IRPP_kangoo:aktif { border:0!important; } .IRPP_kangoo { görüntü: blok; geçiş: arka plan rengi 250ms; webkit geçişi: arka plan rengi 250ms; genişlik: %100; opaklık: 1; geçiş: opaklık 250ms; webkit geçişi: opaklık 250ms; arka plan rengi: #e6e6e6; kutu gölgesi: 0 1px 2px rgba(0, 0, 0, 0.17); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -o-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.17); } .IRPP_kangoo:active , .IRPP_kangoo:hover { opaklık: 1; geçiş: opaklık 250ms; webkit geçişi: opaklık 250ms; arka plan rengi: #FFFFFF; } .IRPP_kangoo .postImageUrl , .IRPP_kangoo .imgUrl { arka plan konumu: merkez; arka plan boyutu: kapak; yüzer: sol; kenar boşluğu: 0; dolgu: 0; } .IRPP_kangoo .postImageUrl { genişlik: %30; } .IRPP_kangoo .imgUrl { genişlik: %100; } .IRPP_kangoo .centered-text-area { kayan nokta: sağ; genişlik: %70; dolgu:0; kenar boşluğu:0; } .IRPP_kangoo .centered-text { ekran: tablo; yükseklik: 100 piksel; sol: 0; üst: 0; dolgu:0; kenar boşluğu:0; } .IRPP_kangoo .IRPP_kangoo-içerik { ekran: tablo hücresi; kenar boşluğu: 0; dolgu: 0 10px 0 10px; pozisyon: göreceli; dikey hizalama: orta; genişlik: %100; } .IRPP_kangoo .ctaText { border-bottom: 0 katı #fff; renk: #000000; yazı tipi boyutu: 13 piksel; yazı tipi ağırlığı: kalın; harf aralığı: .125em; kenar boşluğu: 0; dolgu: 0; metin-dekorasyon: altı çizili; } .IRPP_kangoo .postTitle { renk: #2C3E50; yazı tipi boyutu: 16 piksel; yazı tipi ağırlığı: 600; kenar boşluğu: 0; dolgu: 0; } .IRPP_kangoo .ctaButton { arka plan rengi: #FFFFFF; sol kenar boşluğu: 10 piksel; konum: mutlak; sağ: 0; üst: 0; } .IRPP_kangoo:hover .imgUrl { -webkit-dönüşümü: ölçek(1.2); -moz-dönüşüm: ölçek(1.2); -o-dönüşüm: ölçek(1.2); -ms-dönüşüm: ölçek(1.2); dönüştürme: ölçek(1.2); } .IRPP_kangoo .imgUrl { -webkit-transition: -webkit-transform 0.4s giriş-çıkış kolaylığı; -moz-geçişi: -moz-dönüşüm 0.4s kolay giriş-çıkış; -o-geçiş: -o-dönüşüm 0.4s kolay giriş-çıkış; -ms-geçişi: -ms-dönüşüm 0.4s giriş-çıkış kolaylığı; geçiş: 0.4s kolay giriş çıkışını dönüştürün; } .IRPP_kangoo:sonra { içerik: “”; Ekran bloğu; ikisini de temizle; }

AYRICA BAKINIZ
Özel: VR ve AR için Tek Elle Kısayollar Tasarlama

Pek çok sanat eseri, 'meh'i bir şahesere dönüştürmek için revizyonlar gerektirir ve Resim de bir istisna değildi. Orman için geliştirdiğimiz en eski özelliklerden biriydi ve lansmana kadar üzerinde çalışmaya devam ettik! Burada, özellikle ilgili Boyama deneylerine ve yinelemelerine ilişkin birkaç örnek verilmiştir:

Yalnızca 'Photoshopping'

Başlangıçta, Resim sadece fotoğrafları içeriyordu. Oyuncular şövale üzerine bir fotoğraf yerleştirir ve ardından fotoğrafı tuvale 'boyamak' için boya fırçasını kullanır. Oyuncular, birden fazla fotoğraftaki botları veya manzaraları birleştirerek karıştırıp eşleştirebilir ve hatta (akıllı olsalar bile) boyamak için belirli renklerin yakın plan fotoğraflarını çekebilirler. Ne kadar çok kişi oynarsa, renkli boya örnekleriyle tamamlanan gerçek resmin oyuncuların yaratıcı olma yeteneklerini büyük ölçüde artırdığını fark ettik.

Filtre

Filtreler, fotoğraf işleme yazılımlarında ortak bir unsurdur. elbette Botların onları yanlış yorumlamalarına dahil edeceğini düşündük. Filtreleri uygulamak için düğmelerle deneyler yaptık: pikselleştirme, renkleri ters çevirme, siyah beyaz ve sepya. Bu filtre düğmelerinden herhangi birine basıldığında efektler yığılır ve fırçanın bir sonraki darbesi filtrelenmiş görüntüyü tuvale uygular. İlginç olsa da, oyuncular boyarken tuvalde gerçekte neyin görüneceğini tahmin etmekte zorlanırken filtreler genellikle hayal kırıklığına yol açar. Örneğin, ters çevirme ile fırçanızı turuncu renk örneğine batırırsanız, fırçanız maviye boyar! Filtreleri kameranıza lens olarak entegre etmek yerine şövale üzerindeki filtreleri tamamen kaldırdık. Hiçbir karışıklık olmadan tüm harika efektler!

Boya kovası'

İlk oyun testlerinden aldığımız en büyük geri bildirim, beyaz olmayan arka plan renkleriyle başlama ve resimleri tamamen silme seçeneğiydi. Tuvale düz bir rengi silen bir boya kovası sürgüsünün yanı sıra beyaz boyama seçeneği ekleyerek, bu iki ihtiyacı da tek bir özellikle çözdük. Sürpriz bir fayda olarak, daha fazlasının oluşturulmasını da sağladı ... Bot benzeri resimler.

Harmanlama ve Şeffaflık

Boya kovası sert kenarlar kullanıyordu, ancak fırçadaki aynı sert kenarlara bakıldığında gerçekçi gelmiyordu ya da o kadar harika görünüyordu. Pürüzlü pikseller kesinlikle gerçek hayat resimlerinin çoğunun bir parçası değildir. Daha gerçekçi bir efekt için, tuvale uygulanacak boya miktarını temsil eden bir şeffaflık gradyanı oluşturduk. Temas alanının boyutu ve konumu ile bağlantılı olarak kullanıldığında, boya renginin altında olanla ne kadar karışacağını belirleyebiliriz. Fırça tuval ile ne kadar uzun süre temas halinde kalırsa, o kadar fazla renk uygulanır ve gerçek fırçaların pigmenti kumaşa nasıl aktardığını simüle etmemize olanak tanır.

Birden Çok Fırça

Birkaç fırça ve fırça boyutu yinelemesinden geçtik. Boya kovası kaydırıcısından önce oyuncular bir dev doldurmayı kolaylaştırmak için fırçalayın. Kaydırıcıyı uyguladıktan sonra oyuncular bir daha küçük detay çalışması için fırça. Uzun bir süre daha küçük bir fırçamız vardı, ancak nihayetinde onu Resmin en önemli özelliklerinden biri olan yumuşak uç nedeniyle kestik!

- - - - -

Umarız [DUYGU] Resim!

Bazen bir şeyin istediğiniz gibi görünmesi, hissetmesi ve oynaması için gereken yineleme miktarının etrafında hiçbir yol yoktur. Resim, VR tasarım olanakları, oyuncu beklentileri ve en fazla yaratıcılık için kısıtlamalardan yararlanma konusunda çok önemli bir egzersizdi.

Resim sahnelerinin arkasındaki bu incelemeye göz attığınız için teşekkürler! İçinizdeki Leonardo BotVinci'nizi kanalize etmek için ilham aldığınızı umuyoruz. Tatil Simülatörü.


Artırılmış gerçeklik ve sanal gerçeklik alanında uzmanlar ve içeriden kişiler tarafından katkıda bulunan diğer konuk makalelerini okuyun.

Sonrası 'Tatil Simülatörünün' VR Paintbrush Tech'in Şaşırtıcı Parlaklığı İlk çıktı VR'ye giden yol.

Zaman Damgası:

Den fazla VR'ye giden yol