Mode7 benzeri perspektif, tuvalde dönüşüm mü?

Question

Tuval tabanlı bir oyun motoru yapıyorum ve herkesin bir genel bakış açısından nasıl elde edileceğine dair iyi bir bilgi olup olmadığını merak ediyorum. Aradığım şey, geleneksel kuş bakışı ve eski SNES mode7 görünümü arasında bir yerlerde. 3B yanılsamasını vermek için sadece hafif bir açı.

Perspektif eğrileriyle başa çıkmak için en iyi yolun ne olacağını anlamaya çalışıyorum. 3B matrislerin aşırı gitmesine neden olacak şekilde rotasyon yapmıyorum, ama harita katmanlarını tutarlı bir açıyla işlemeye başlayabilmem gerekiyor ve açı ayarlanabilirse iyi olurdu. Ayrıca derinlik çözgü ile uğraşmak zorundayım. Temel olarak, piksellerin alt sırasının 1: 1 piksel genişliğinde ve yüksekliğinde olması gerekir, daha sonra, örneğin% 5 daha küçük veya bunun gibi bir şey elde edersiniz. İstediğim şey, büyük bir tuvali doku olarak temin edebilmek ve 0 ile 90 arasında bir kamera açısı sağlamaktır. Burada 0 mükemmel yataydır ve 90 kuş gözü görünümüdür.

Herhangi bir ilgili öğretici veya örnek kodunuz var mı? Ben biraz çevrimiçi arama yaptım, ama bulduğum her şey ya bu uygulamada kullanım için uygun ya da her türlü çılgın 3D skewing ve rotasyon şeyler yapmak, aşırı karmaşık görünüyor. Tek istediğim, normal kiremitli ızgarayı alıp, biraz döndürme, dönme ya da karmaşık şeyler gibi bir yere geri yatırmak.

İşte benim istediğim bir örnek; Here's an example. http://img801.imageshack.us/img801/2176/perspectivesample.jpg

Alt piksel sırası 1: 1 pikseldir ve üstündeki her satır giderek yatay ve dikey olarak kısalır. Üst orta bölgenin kaynak dokusu normal olarak alt orta bölgenin yüksekliğinin yaklaşık yarısı kadardır, fakat perspektife uyması için dikey ve yatay olarak büzülmüştür.

Düşüncelerim en iyi ihtimalle geçerli görünümünüzü düz, kuşbakışı görünümünde başka bir tuvale, üstte ve yüzde yaklaşık% 50 daha fazla alan ile render etmektir. Bunu gerçek görünür tuvale çizin.

Tek sorun, açıları hesaplamak söz konusu olduğunda matematiği emerim.

Answer 1

Sözünü ettiğiniz şey, herhangi bir 3D api ile yapılabilecek bir şeydir. Ancak, 2B tuvaline yapışmayı denemeye karar verdiğiniz için, 2B dünyasında, dikdörtgenler, rotasyon, ölçekleme, eğriltme vb. Ile çalışmak anlamına gelen her şeyi yapmanız gerekir. Diğer cevaplardan da bahsedildiği gibi afine dönüşümler olarak bilin.

Yapmak istediğiniz şey mümkün, ancak 2D kullanmak istediğiniz için 2B işlevler açısından düşünmeniz gerekiyor.

1. İlk görüntüyü oluşturur.
2. Orijinal görüntünün alt tarafından tuvalin altına kadar bir dilim ekleyin, çok solda olacak şekilde yerleştirin, böylece görüntünün ortası geçerli kanvasın ortası ile eşleşir.
3. Tüm görüntünün ölçeğini biraz artırın
4. Görüntünün başına gidene kadar tekrarlayın. Bu verdiği çok alacak, ama bu genel bir çözümdür

   imgA = document.getElementById('source'); 
   
   // grab image slices from bottom to top of image 
   for (var ix=height-slice_height;ix>=0;ix-=slice_height) 
   { 
   
       // move a section of the source image to the target canvas 
       ctx.drawImage(imgA, 0,ix,width,slice_height, 
        0-half_slice_width_increase,width,slice_height); 
       // stretch the whole canvas 
       ctx.scale(scale_ratio, 1); 
   } 
   

sözde kod şu şekilde görünecektir ....

• scale_ratio bir sayı biraz daha büyük, ama 1.
• ctx çok yakın olacak
• half_slice_width_increase 1/2 miktar tuval olacak olan standart tuval 2B bağlamdır ölçek oranıyla ölçeklendiğinde büyür. Bu ölçeklenmiş görüntüyü ortalar.

Doğru bakmak için, simge kaplamalarını eklemeden önce arka plan karolarını dönüştürmek isteyeceksiniz.

Answer 2

Eğer doğru anlıyorsanız, basit bir trapez dönüşümü istiyorsunuz. eğer öyleyse, belki this veya this link yardımcı olur. Ortalanmış olmayan görüntüler için, sadece bildiğim kadarıyla tuval ile kolayca mümkün olan ek bir rhomboid dönüşüm olabilirdi.