Ten artykuł został stworzony dla starszych wersji GameMakera i może nie być aktualny.

Budynki w rzucie izometrycznym

Niedziela, 28 Grudnia 2008, 16:42
Czas czytania 5 minut, 30 sekund
Świetny artykuł opisujący krok po kroku jak stworzyć własny budynek w rzucie izometrycznym.
1.
Punkt pierwszy, a zarazem najtrudniejszy. Podstawą w tworzeniu budynków sposobem który przedstawię, jest dobór odpowiednich "kątów" pod jakimi będzie rysowany budynek. Od tych właśnie kątów, zależy jak będzie widziany budynek w grze. Bardziej z boku, z góry, niżej czy wyżej. Dlatego też, ja podczas tworzenia tutoriala wybrałem takie "kąty":
Grafika: http://img375.imageshack.us/img375/2940/1axm7.png

Na obrazku przedstawione są te właśnie "kąty" (wszystkie możliwe!) za pomocą pikseli, które się po prostu powtarzają. Jak już powiedziałem, najważniejszą rzeczą jest ich odpowiedni dobór, aby obrazek był odpowiednio dobrze widoczny w grze. Warto również podkreślić, że na podstawie tych "kątów" będzie tworzona reszta grafiki do gry, więc ich wybór i dobre ustawienie jest niezwykle ważne, a w dalszych pracach może być już nie do poprawienia.

Zatem, kąty dobrane, obrazek wygląda tak:
Grafika: http://img380.imageshack.us/img380/8400/64392762sq1.png

2.
Drugi punkt nie jest już tak istotny jak pierwszy, ale znacząco wpływa na końcowy efekt naszego budynku. Mianowicie poprawiamy drobne elementy jak np. dach - aby nie sprawiał wrażenia grubości jednego piksela, poszerzamy go o takie same kąty, jakich użyliśmy właśnie do stworzenia tego dachu (poprzednie elementy dachu można po prostu kopiować, aby niepotrzebnie się nie męczyć z ponownym dobieraniem tych kątów).
Ja w swoim obrazku zrobiłem na przedniej ścianie też kilka pasków grubości dwóch pikseli, to już tylko kwestia wyobraźni - będą one służyły jako drewniane belki w ścianie.
Grafika: http://img353.imageshack.us/img353/6600/93053279td4.png

3.
Punkt trzeci - kolory. Chyba najprostszy ze wszystkich. Wystarczy odpowiednio wypełnić kolorami budynek - bez dachu! . Dach, to trochę bardziej skomplikowana sprawa. Opiszę to w następnych punktach. Należy jednak pamiętać, aby jedna ściana, była kilka tonów ciemniejsza niż druga. Światło nie pada z dwóch stron, dlatego też taka zasada.
Grafika: http://img368.imageshack.us/img368/2614/95262989wu3.png

4.
Teraz dach. Jedna z trudniejszych czynności podczas tworzenia budynku. Oczywiście można by go po prostu zakolorować jednym kolorem, jak resztę budynku, ale by to po prostu brzydko wyglądało, więc dach wykonamy w trochę inny sposób.

4a.
Pierwszą czynnością, jaką trzeba wykonać podczas tworzenia dachu, jest namalowanie kilku nieskomplikowanych (wręcz banalnych) dachówek. W powiększeniu wyglądają one mniej wiecej tak:
Grafika: http://img368.imageshack.us/img368/9587/46217861uy7.png

4b.
Drugą czynnością jest ich kopiowanie. Po prostu należy je kopiować - jedna obok drugiej tak, aby razem pokryły nam całą powierzchnię jednej części naszego dachu. Czyli tak:
Grafika: http://img363.imageshack.us/img363/5545/81956080no8.png

4c.
Dach (część na której nie chcemy tych kafelek), oraz przestrzeń wokół obrazka wypełniamy jakimś kolorem. Ja wybrałem dość jaskrawy, widoczny zielony.
Grafika: http://img368.imageshack.us/img368/6601/65822785wk4.png

Następnie zaznaczamy cały obrazek, i wklejamy go na nasze połączone dachówki. Zaznaczamy opcję "rysuj nieprzeźroczyste" w Paincie po czym usuwamy zieloną otoczkę z obrazka i oto nasza część dachu po wykonaniu wszystkich czynności:
Grafika: http://img363.imageshack.us/img363/3466/64461957aa0.png

Wykonanie drugiej części dachu jest identyczne jak tej, więc myślę, że nie ma sensu tłumaczyć jeszcze raz tej samej rzeczy :).
Teraz nasz obrazek wygląda tak:
Grafika: http://img368.imageshack.us/img368/2084/88828101cb0.png

5.
Ale co to za budynek bez okien? Wykonanie ich jest banalnie proste. Wystarczy na podstawie określonych kątów zrobić niewielką ramę i wypełnić ją niebieskim kolorem. Ja dodałem jeszcze ledwo widoczne zasłony w tle dla efektu wizualnego. Okno w powiększeniu wygląda tak:
Grafika: http://img368.imageshack.us/img368/7100/23002817ic0.png

Teraz umieszczanie tych okien na obrazie. Zwykłe kopiuj - wklej. Ale należy pamiętać, aby je inteligentnie rozmieścić na budynku, tzn. akurat tutaj każde okno bardzie na prawo, jest odrobinę niżej położone:
Grafika: http://img295.imageshack.us/img295/473/10xt5.png


6.
Grafika: http://img295.imageshack.us/img295/1672/11js7.png


W szóstym punkcie przybliżę wykonanie drzwi. Również opierając się na wskazanych wcześniej kątach tworzymy ramę drzwi a czynności z ich wypełnieniem, są identyczne jak przy wykonywaniu dachu. Tworzymy kilka desek, z których będą składać się nasze drzwi. Ramę z zieloną otoczką naklejamy na stworzone wcześniej deski (zielona otoczka jest po to, aby w razie gdyby deski były większe niż drzwi, nie trudzić się z usuwaniem niepotrzebnych pikseli). Dla poprawy drzwi, można również dorobić dwa zawiasy po lewej stronie i klamkę - po prawej.
Obrazek z drzwiami wygląda teraz tak:
Grafika: http://img295.imageshack.us/img295/9269/12cs3.png


7. DODATKI!
Aby nasz obrazek lepiej się prezentował niezbędne są dodatki. Uznałem, że obrazek będzie pełnił funkcje karczmy, więc to dlatego dodałem tą "chorągiewkę" nad drzwiami. Uznałem również, że ładnie będą się prezentować pnie drzewa, leżące pod tym wydłużeniem dachu. Wykonanie tych dodatków, jest również banalnie proste - wystarczy cały czas wzorować się na obranych kątach i podczas układania nowych elementów odnosić się do nich.
Grafika: http://img295.imageshack.us/img295/6761/13fb7.png


8.
Punkt 8 i ostatni - cieniowanie. Cieniowanie można wykonać w każdym programie graficznym, ale ja do tego użyłem Paint Shop Pro. Po pierwsze, należy obrać z której strony mają padać promienie słoneczne. Ja ustaliłem je "za" budynkiem, lecz nie do końca, mniej/więcej tak:
Grafika: http://img295.imageshack.us/img295/645/14ms9.png


Co by tutaj więcej o cieniowaniu tłumaczyć - to kwestia wyobraźni. Myślę, że każdy wie jak będzie padał cień z obrazka w zależności od ustawienia słońca.

9.
Koniec :)
Tak wygląda efekt końcowy naszego obrazka:
Grafika: http://img368.imageshack.us/img368/2877/15fs2.png

Kierując się tymi zasadami możemy wykonać różne budynki, np.
Grafika: http://img377.imageshack.us/img377/794/portcq2.png
Komentarze (łącznie 18, wyświetlam 1 - 15):
Mimek (Nie., 28 Gru. 08, 16:56)
#1

Art świetny, dodałem tu i dałem newsa. Daję 10 :)

D
Dawka83 (Nie., 28 Gru. 08, 17:04)
#2

zarąbiste!!!

Misiek999 (Nie., 28 Gru. 08, 17:16)
#3

Już to kiedyś czytałem na forum. fajne ;]

S
Sirluki (Nie., 28 Gru. 08, 17:32)
#4

Dzięki jeszcze raz Mimek za dodanie :)

Paqoo (Nie., 28 Gru. 08, 17:49)
#5

Bardzo ciekawe grafiki :) Genialnie to wytłumaczyłeś.

Nikas (Nie., 28 Gru. 08, 20:07)
#6

bardzo ładne te budynki ale chyba te kreski w niektórych miejscach są złe? ale kto by się tam czepiał,efekt końcowy ładny

L
Lechu4444 (Pon., 29 Gru. 08, 20:21)
#7

świetny art oby więcej takich 10 punktów

geralt100 (Pią., 06 Lut. 09, 10:44)
#8

Zarąbisste 10/10
potwierdzam zdanie Nikasa

G
Game Maker Fan (Nie., 09 Sie. 09, 09:47)
#9

Bardzo fajny efekt, 10/10

g
gibon (Nie., 09 Sie. 09, 17:32)
#10

ładnie to wygląda

G
Game Maker Fan (Nie., 09 Sie. 09, 18:06)
#11

W jakim programie to było tworzone? Chodzi mi o koniec (efekt cienia)

g
gibon (Nie., 09 Sie. 09, 19:18)
#12

Paint Shop Pro

g
gibon (Nie., 09 Sie. 09, 19:20)
#13

ładnie zrobić coś ala comandos na izometri

HrabiaDrako (Wto., 11 Sie. 09, 10:51)
#14

No super,teraz czekamy na przykłady postaci w izometrii ;D

S
Sirluki (Wto., 11 Sie. 09, 16:33)
#15

Fajnie, że ktoś jeszcze pamięta o tym artykule ;)
forum.gmclan.org/index.php?showtopic=12866&st=0&start=0
Tutaj można zobaczyć resztę grafik wykonanych tym sposobem, fajnie by było jakby ktoś je dodał do artykułu ;)

Najnowsze wersje GameMakera:

Stabilna
2024.4.1.152 • 2024.4.1.202
wydana  3 dni temu
LTS
2022.0.2.51 • 2022.0.2.49
wydana 221 dni temu
Beta
2024.600.0.560 • 2024.600.0.577
wydana  wczoraj
= IDE, = Runtime
Użytkownicy online
1 użytkownik aktywny:
gości: 1,
(~ostatnie 15 minut)
Discord
11 użytkowników online na discordzie:
Papaj, Carl-bot, p..., OdrzuconyKrakers, LadyLush, VanhGND, MKP (GEM), debil debilowski, Dyno, LeD, l...
Shoutbox
gnysek (10:09, 21.05.24)
Ale z jakimi błędami...
I am Lord (09:52, 20.05.24)
o piszą o nas 😁
Chell (11:15, 17.05.24)
nareszcie będzie można zaimplementować padający śnieg w gierce
gnysek (18:33, 16.05.24)
JS zmierza do GM xD
I am Lord (16:29, 05.05.24)
Czaję
gnysek (13:38, 04.05.24)
Nie wbudowują tego przez warunki licencyjne. Ale kto wie, może jako prefab zobaczymy to już w kolejnym wydaniu, bo wtedy prefaby mają zostać dodane.
I am Lord (12:17, 03.05.24)
Aha to trzeba coś tam jeszcze kombinować tak
gnysek (18:05, 01.05.24)
Tak, w osobnym rozszerzeniu (na githubie YYG).
Starsze wpisy znajdziesz w Archiwum.
Ankieta
Ile zarobiłeś do tej pory na grach stworzonych w GM?