κ²Œμž„μ„ λ§Œλ“€λ €λ©΄ 기본적인 κ·Έλž˜ν”½μ΄ μžˆμ–΄μ•Ό ν•œλ‹€. λ³Έ κ°•μ’Œμ—μ„œ ν™œμš©ν•  κ·Έλž˜ν”½ νŒŒμΌμ€ λ‹€μŒ λ§ν¬μ—μ„œ λ‹€μš΄λ°›μ„ 수 μžˆλ‹€.

https://i-mega.itch.io/sideview-dummy-graphics

itch.ioitch.ioi-mega.itch.io


Β 

platform.zip파일과 main_character.zip 총 2개의 μ••μΆ•νŒŒμΌμ„ λ‹€μš΄λ°›κ³  압좕을 ν’€μ–΄μ€€λ‹€.


Β 

압좕을 ν‘Ό νŒŒμΌλ“€μ„ 폴더 째둜 ν”„λ‘œμ νŠΈ 폴더에 μ§‘μ–΄λ„£μž, λ˜λŠ” 에디터 화면에 λ“œλž˜κ·Έν•˜μž. 그러면 파일 μ‹œμŠ€ν…œ λ…μ—μ„œ ν•΄λ‹Ή νŒŒμΌμ„ 확인할 수 μžˆμ„ 것이닀.



Β 

파일 μ‹œμŠ€ν…œμ—μ„œ μƒˆλ‘œμš΄ 폴더 2개(graphic, character)λ₯Ό μƒμ„±ν•˜μ—¬ μŠ€ν¬λ¦°μƒ·κ³Ό 같이 νŒŒμΌλ“€μ˜ 경둜λ₯Ό μ’…λ₯˜μ— 맞게 μ •λ¦¬ν•΄μ£Όμž.

Β 

이제 κ·Έλž˜ν”½ νŒŒμΌμ€ μ€€λΉ„κ°€ λ˜μ—ˆμœΌλ‹ˆ, κ³ λ„μ—”μ§„μœΌλ‘œ κ²Œμž„μ„ λ§Œλ“€κΈ° μœ„ν•˜μ—¬ λ°˜λ“œμ‹œ μ•Œμ•„μ•Ό ν•˜λŠ” κ°œλ…μΈ [λ…Έλ“œ]와 [씬]을 ν•™μŠ΅ν•΄λ³΄μž.


Β  Β Β Β 

씬 λ…μ—μ„œ [2D Scene]λ²„νŠΌμ„ ν΄λ¦­ν•˜μž. [Node2D]λΌλŠ” 것이 생성될 것이닀. μ΄λŠ” [λ…Έλ“œ]의 일쒅이닀.


Β 

μΆ”κ°€μ μœΌλ‘œ [λ…Έλ“œ]λ₯Ό μƒμ„±ν•˜λ €λ©΄ 씬 λ…μ˜ μ™Όμͺ½ μœ„ [+]λ²„νŠΌμ„ ν΄λ¦­ν•˜λ©΄ λœλ‹€.Β 


Β 

[λ…Έλ“œ]의 λ‹€μ–‘ν•œ μ’…λ₯˜λ“€μ΄ λ‚˜μ—΄λ˜κ³ , μ›ν•˜λŠ” 것을 μ„ νƒν•˜λ©΄ ν•΄λ‹Ή μ’…λ₯˜μ˜ [λ…Έλ“œ]κ°€ 씬 독과 2D μŠ€ν¬λ¦°μ— μƒμ„±λœλ‹€.

Β 

[λ…Έλ“œ](Node)λž€, κ²Œμž„μ„ κ΅¬μ„±ν•˜λŠ” λΆ€ν’ˆμ΄λ‹€. λ…ΈνŠΈλΆμ„ μƒκ°ν•΄λ³΄μž. λ…ΈνŠΈλΆμ„ λ§Œλ“œλŠ” 곡μž₯μ—μ„œλŠ” λ‹€μŒκ³Ό 같은 μ—¬λŸ¬ μ’…λ₯˜μ˜ λΆ€ν’ˆλ“€μ„ μ‘°λ¦½ν•˜κ²Œ λœλ‹€.

-Β Β Β Β Β  κ·Έλž˜ν”½μ„ ν‘œμ‹œν•˜λŠ” λͺ¨λ‹ˆν„°

-Β Β Β Β Β  μ‚¬μš©μžμ˜ μž…λ ₯을 λ°›λŠ” ν‚€λ³΄λ“œ

-Β Β Β Β Β  μ†Œλ¦¬λ₯Ό 좜λ ₯ν•˜λŠ” μŠ€ν”Όμ»€

-Β Β Β Β Β  연산을 λ‹΄λ‹Ήν•˜λŠ” ν”„λ‘œμ„Έμ„œ

λ§ˆμ°¬κ°€μ§€λ‘œ κ³ λ„μ—”μ§„μ—λŠ” κ·Έλž˜ν”½μ„ ν‘œμ‹œν•˜λŠ” [λ…Έλ“œ], μ†Œλ¦¬λ₯Ό μž¬μƒν•˜λŠ” [λ…Έλ“œ], 물리 연산을 μ μš©ν•˜λŠ” [λ…Έλ“œ]λ“± μ—¬λŸ¬κ°€μ§€ μ’…λ₯˜μ˜ [λ…Έλ“œ]듀이 μ‘΄μž¬ν•˜λ©° μš°λ¦¬λŠ” λ‹€μ–‘ν•œ [λ…Έλ“œ]듀을 μ μ ˆν•˜κ²Œ μ‘°λ¦½ν•˜λ©΄μ„œ κ²Œμž„μ„ κ°œλ°œν•˜κ²Œ λœλ‹€. [λ…Έλ“œ]λ₯Ό μ‘°λ¦½ν•˜λŠ” 것에 정닡은 μ—†μœΌλ©° μ–΄λ–€ ꡬ쑰둜 μ–΄λ–€ 배치둜 [λ…Έλ“œ]λ₯Ό μ‘°λ¦½ν• μ§€λŠ” 개발자 μŠ€μŠ€λ‘œκ°€ μ •ν•˜λŠ” 것이닀.


Β 

[λ…Έλ“œ]λ₯Ό μ΄μš©ν•΄μ„œ κ²Œμž„ 화면을 꾸며보자. μ΄λ²ˆμ— ν•„μš”ν•œ λ…Έλ“œλŠ” [Sprite2D]이닀. [Sprite2D]λŠ” 2D 화면상에 이미지λ₯Ό λ„μš°λŠ” κΈ°λŠ₯을 κ°–κ³  μžˆλ‹€. μœ„μ—μ„œ 배운 λŒ€λ‘œ 씬 독을 μ΄μš©ν•΄μ„œ [Sprite2D]λ…Έλ“œλ₯Ό μƒμ„±ν•΄μ£Όμž. μ΄λ•Œ μˆ˜λ§Žμ€ [λ…Έλ“œ]λ₯Ό 일일이 마우슀둜 λ’€μ§€λŠ” 것은 μ‹œκ°„μ΄ 였래 κ±Έλ¦¬λ‹ˆ μŠ€ν¬λ¦°μƒ·μ²˜λŸΌ λ…Έλ“œ 생성 μ°½μ—μ„œ 검색(Search)칸에 β€˜Sprite2D’λ₯Ό μž…λ ₯ν•˜μ—¬ 찾자.


Β 

μ΄λ ‡κ²Œ [Sprite2D]κ°€ μƒμ„±λ˜μ—ˆμœΌλ©΄ μ΄λ²ˆμ—λŠ” [Sprite2D]λ₯Ό μ„ νƒν•œ μƒνƒœλ‘œ μΈμŠ€νŽ™ν„°λ₯Ό 보자.


Β 

[λ…Έλ“œ]λ₯Ό μ„ νƒν•˜λ©΄ μ΄λ ‡κ²Œ μΈμŠ€νŽ™ν„°μ—μ„œ ν•΄λ‹Ή [λ…Έλ“œ]의 속성듀이 λ‚˜νƒ€λ‚˜κ²Œ λœλ‹€. 속성 μ€‘μ—μ„œ β€˜textureβ€™λΌλŠ” 속성에 μ£Όλͺ©ν•˜μž.


Β 

파일 μ‹œμŠ€ν…œμ—μ„œ platform폴더에 λ“€μ–΄μžˆλŠ” platform.pngνŒŒμΌμ„ 이 texture속성에 λ“œλž˜κ·Έν•˜λ©΄ 2D μŠ€ν¬λ¦°μ— platform.png의 κ·Έλž˜ν”½μ΄ ν‘œμ‹œλœλ‹€. [Sprite2D]λŠ” μ΄λ ‡κ²Œ μžμ‹ μ˜ texture속성에 ν• λ‹Ήλœ κ·Έλž˜ν”½μ„ 2D μŠ€ν¬λ¦°μ— ν‘œμ‹œν•΄μ£ΌλŠ” 역할을 κ°€μ§„ [λ…Έλ“œ]인 것이닀.


Β 

2Dκ΄€λ ¨ λ…Έλ“œλŠ” 2D 슀크린 μœ„μͺ½μ˜ [툴 λ°”]μ—μ„œ μ œκ³΅ν•˜λŠ” 도ꡬλ₯Ό μ΄μš©ν•˜μ—¬ μœ„μΉ˜ 이동, 각도 쑰절, 크기 쑰절이 κ°€λŠ₯ν•˜λ‹€. μŠ€ν¬λ¦°μƒ·μ— κ°•μ‘°λœ 4개의 νˆ΄μ€ 각각 선택, 이동, νšŒμ „, 크기 툴인데, 각 툴 μœ„μ— 마우슀λ₯Ό 올리고 κ°€λ§Œνžˆ 있으면 μ„€λͺ…이 λ‚˜νƒ€λ‚œλ‹€. 각각의 툴둜 μ „ν™˜ν•˜λŠ” λ‹¨μΆ•ν‚€λŠ” Q, W, E, R이닀.

Β 

특히 선택 νˆ΄μ€ λ‚˜λ¨Έμ§€ 3개 툴의 κΈ°λŠ₯을 μ „λΆ€ κ°€μ§€κ³  μžˆμœΌλ‹ˆ μ΅μˆ™ν•΄μ§€λ©΄ μœ μš©ν•˜λ‹€.

-Β Β Β Β Β  Ctrlν‚€λ₯Ό λˆ„λ₯΄κ³  μžˆμ„ λ•ŒλŠ” νšŒμ „ 툴의 역할을 κ°€μ§„λ‹€.

-Β Β Β Β Β  Altν‚€λ₯Ό λˆ„λ₯΄κ³  μžˆμ„ λ•ŒλŠ” 이동 툴의 역할을 κ°€μ§„λ‹€.

-Β Β Β Β Β  Ctrlκ³Ό Altλ₯Ό λ™μ‹œμ— λˆ„λ₯΄κ³  μžˆμ„ λ•ŒλŠ” 크기 툴의 역할을 κ°€μ§„λ‹€.

Β 

λ˜ν•œ 마우슀 νœ μ„ ꡴리면 2D슀크린의 λ°°μœ¨μ„ μ‘°μ ˆν•  수 μžˆλ‹€.



Β 

μ—¬λŸ¬ 개의 Sprite2Dλ₯Ό μƒμ„±ν•˜κ³  μ‘°μž‘ν•˜μ—¬ κ²Œμž„ν™”λ©΄μ„ 꾸며보자.

팁) 씬 λ…μ—μ„œ [λ…Έλ“œ]λ₯Ό μ„ νƒν•˜κ³  Ctrl+Dλ₯Ό μž…λ ₯ν•˜λ©΄ λ³΅μ œν•  수 μžˆλ‹€.

팁2) 씬 λ…μ—μ„œ 더 μœ„μ— μœ„μΉ˜ν•˜λŠ” λ…Έλ“œμΌμˆ˜λ‘ 2D μŠ€ν¬λ¦°μ— λ¨Όμ € κ·Έλ €μ§€κΈ° λ•Œλ¬Έμ— 더 μ•„λž˜μ— μžˆλŠ” λ…Έλ“œμ— κ°€λ €μ§„λ‹€. κ·ΈλŸ¬λ‹ˆ μ•žμœΌλ‘œ λ‚˜μ™€μ•Ό ν•˜λŠ” λ…Έλ“œλŠ” 씬 λ…μ—μ„œ 더 μ•„λž˜μ— μœ„μΉ˜μ‹œν‚€μž.


Β 

이제 μ§€κΈˆκΉŒμ§€ λ§Œλ“  것듀을 μ €μž₯ν•˜μž. Ctrl+Sλ₯Ό μž…λ ₯ν•˜λ©΄ μ €μž₯ν•  수 μžˆλ‹€. β€˜stage_1.tscnβ€™μ΄λΌλŠ” μ΄λ¦„μœΌλ‘œ μ €μž₯ν•˜μž.


Β 

μ €μž₯ν•˜λ©΄ μœ„μ˜ 탭에 κ·Έ 이름이 ν‘œμ‹œλ˜κ³  λ°”λ‘œ 였λ₯Έμͺ½μ˜ Xλ²„νŠΌμ„ ν΄λ¦­ν•˜μ—¬ 탭을 μ’…λ£Œμ‹œμΌœλ„ λœλ‹€.


Β 

μ΄ν›„μ—λŠ” 파일 μ‹œμŠ€ν…œμ—μ„œ μ €μž₯된 것을 λ”λΈ”ν΄λ¦­ν•˜μ—¬ λ‹€μ‹œ μ—΄ 수 μžˆλ‹€.


μ΄λ ‡κ²Œ μš°λ¦¬κ°€ stage_1μ΄λΌλŠ” 이름을 λΆ™μ—¬ μ €μž₯ν•œ 것은 κ²°κ΅­ 씬 독에 λ‚˜νƒ€λ‚˜ 있던 λ…Έλ“œλ“€μ„ ν•˜λ‚˜μ˜ 파일둜 묢은 것이닀. 그리고 μ΄λ ‡κ²Œ μ €μž₯ν•œ 것을 [씬]이라고 λΆ€λ₯Έλ‹€.

Β 

[씬](Scene)μ΄λž€, ν•˜λ‚˜ μ΄μƒμ˜ [λ…Έλ“œ]λ“€μ˜ 정보λ₯Ό 배치 ꡬ쑰와 ν•¨κ»˜ μ €μž₯ν•œ 것이닀. 씬 λ…μ˜ 이름이 β€˜μ”¬ 독’인 μ΄μœ λ„ ν˜„μž¬ μ—΄λ¦° [씬]에 ν¬ν•¨λœ λ…Έλ“œλ“€μ„ λ³΄μ—¬μ£ΌλŠ” μ˜μ—­μ΄κΈ° λ•Œλ¬Έμ— β€˜μ”¬ 독’인 것이닀.

Β 

[씬]은 κ·Έμ € μ—¬λŸ¬ 개의 [λ…Έλ“œ]듀을 묢은 것일 뿐이기에 ν•˜λ‚˜μ˜ [λ…Έλ“œ]처럼 또 λ‹€λ₯Έ [씬]에 λ°°μΉ˜ν•˜λŠ” 것 λ˜ν•œ κ°€λŠ₯ν•œλ°, 이 뢀뢄은 μ•žμœΌλ‘œ μš°λ¦¬κ°€ 이 κ°•μ’Œλ₯Ό μ§„ν–‰ν•˜λ©΄μ„œ μ‹€μŠ΅ν•˜κ²Œ 될 것이닀.