짧은 만화

more

고도 엔진

more

고도 엔진 슈팅게임 #7: 사운드&이펙트

[사운드]1. 사격 & 엔진사격과 엔진 사운드를 추가해 보자.Player에 AudioStreamPlayer 노드를 2개 추가하고 각각 LaserSound, EngineSound로 바꾼다. 먼저 사격 사운드를 위해 shoot()에 다음 코드를 추가한다.$LaserSound.play() 만약 소리가 너무 크거나 작다고 느껴지면 Volumne dB 에서 조절할 수 있다. 다음으로 엔진 사운드는 thrust 입력을 받고 있을 때만 재생되어야 하며, 입력을 누르고 있는 동안은 계속 재생되어야 한다.get_input()에 EngineSound를 조건부로 재생하고 멈추는 코드를 추가한다.if Input.is_action_pressed("thrust"): thrust = transform.x * engine_po..
토이프로젝트 2025.01.08 0

고도 엔진 슈팅게임 #6: 플레이어 보호막 기능

[플레이어 보호막]적이나 바위에 부딪혔을 때 혹은 적의 총알에 맞을 때 보호막이 작동해서 바로 목숨을 잃지 않도록 하는 기능을 추가할 것이다.  다음 코드를 player.gd 에 추가한다.signal shield_changed@export var max_shield = 100.0@export var shield_regen = 5.0var shield = 0: set = set_shieldfunc set_shield(value): value = min(value, max_shield) shield = value shield_changed.emit(shield / max_shield) if shield  코드에서 shield_changed 시그널을 보낼 때 shield/max_shield 로 보내는데, HU..
토이프로젝트 2024.12.20 0

고도 엔진 슈팅게임 #4: UI

[게임 UI]시작버튼, 게임 상태, 점수, 목숨을 설정 할 수 있도록 만들 것이다.다음 단계를 따라 UI 설정을 하자. [새 씬] 으로 새로운 씬을 만들고 CanvasLayer 루트 노드를 생성한뒤 이름을 HUD로 변경한다.HUD 하위에 Timer와 MarginContainer 를 추가한다. 1Timer 노드는 One Shot 속성에 체크해주고 Wait Time을 2로 설정한다. 3MarginContainer 에는 점수와 남은 목숨 두가지가 들어갈것이다. 앵커 프리셋 설정을 '위쪽 넓게'로 해준다.그리고 [인스펙터] 탭의 Theme Overrides - Constants 옵션에서 margin을 네 부분 모두 20으로 설정한다. 2MarginContainer 하위 노드로 HBoxContainer를 추가한다..
토이프로젝트 2024.10.29 2

[HTML] HTML canvas로 Flow Field 구현하기

Flow Field Flow Field 는 시뮬레이션에 사용되는 그래픽 기술로, 각 지점에 대한 특정 방향으로의 흐름을 나타내는 표현 방법이다. (feat. chat GPT) 예시를 찾아보면 초등학생 때 철가루와 자석을 이용해 자기장을 표시하는 듯한 비주얼이다. generative art 결과물들을 보면 여기에서도 많이 쓰이는듯한데 p5.js 라는 라이브러리를 이용하면 좀 더 편하게 구현할 수 있는 모양이다. 하지만 간단한 건 직접 구현하기 그다지 어렵지 않으니 HTML canvas + JavaScript 로 직접 구현해 보자. 결과물 위처럼 마우스 드래그 할 때마다 Flow Field가 그려지도록 만들 것이다. Flow Field 구현 세세한 코드를 전부 올리진 않고(어차피 GitHub에 있으니..) ..
WEB 2024.02.20 0

인기 글

Git 저장소의 핵심: .git 폴더와 git reflog 활용법 (git reset 복구하기)

프로젝트를 생성하여 이를 Git 저장소로 관리하고 싶을 때 git init 명령어를 사용한다.이때 .git 폴더가 자동으로 생성된다.이 .git 폴더에는 어떤 정보가 담겨 있을까?   1. .git 폴더.git 폴더는 Git 저장소의 핵심이 담겨있는 곳이다.폴더 안의 주요 구성 요소를 살펴보자. HEAD현재 체크아웃된 브랜치를 가리킴cat .git/HEAD로 현재 체크아웃된 브랜치 확인 가능config저장소의 Git 설정을 저장하는 파일원격 저장소 주소, 사용자 정보, 커스텀 설정 등logs/브랜치 및 HEAD의 변경 이력을 기록하는 디렉토리git reflog 명령어로 확인 가능objects/Git의 핵심 데이터인 커밋, 트리, 블롭 등을 저장하는 디렉토리모든 파일과 커밋이 압축된 형태로 저장됨주요 하위..
프로그래밍 2025.03.05 0
이벤트 루프와 콜스택을 시각적으로 확인하는 방법

어느 날 문득 ‘이벤트 루프가 실행되는 과정을 시작적으로 확인해 볼 수 있는 방법이 있을까?’ 하는 궁금증이 들었다.물론 console.log()를 코드 곳곳에 넣어서 출력을 확인하거나 console.trace()로 콜스택을 살펴볼 수도 있지만, 뭔가 더 간편하게 보여주는 방법이 있을 것 같았다.이 글에서는 debugger를 이용해 콜스택(Call Stack)과 마이크로태스크 큐(Microtask Queue)의 실행 과정을 직접 눈으로 확인하는 방법을 알아보겠다.1. 이벤트 루프 실행 순서 확인하기프론트엔드 면접에서 자주 등장하는 문제 중 하나가 다음 코드의 실행 순서를 예상하는 것이다.console.log("1");setTimeout(() => { console.log("2");}, 0);Promis..
JavaScript 2025.02.08 1
[TypeScript] type vs interface 차이점

TypeScript에서 type과 interface는 둘 다 타입을 정의하는 데 사용되지만, 각각의 특성과 활용 방식이 다르다.1. 인터페이스 (interface) ✅ 객체 형태 확장에 유리✅ 라이브러리 확장에 적합 • extends 키워드로 쉽게 확장 가능 • 동일한 이름의 인터페이스를 여러 번 선언하면 속성이 합쳐짐 (Declaration Merging) interface User { name: string}interface User { age: number}// 병합됨const user: User = { name: "Alice", age: 25 } 이러한 특징 덕분에 라이브러리의 타입을 확장할 때 유용하다. 2. 타입 별칭 (type) ✅ 복잡한 타입 조합에 유리✅ 튜플, 유니온, 리터럴 타입 ..
JavaScript 2025.02.07 0
고도 엔진 슈팅게임 #7: 사운드&이펙트

[사운드]1. 사격 & 엔진사격과 엔진 사운드를 추가해 보자.Player에 AudioStreamPlayer 노드를 2개 추가하고 각각 LaserSound, EngineSound로 바꾼다. 먼저 사격 사운드를 위해 shoot()에 다음 코드를 추가한다.$LaserSound.play() 만약 소리가 너무 크거나 작다고 느껴지면 Volumne dB 에서 조절할 수 있다. 다음으로 엔진 사운드는 thrust 입력을 받고 있을 때만 재생되어야 하며, 입력을 누르고 있는 동안은 계속 재생되어야 한다.get_input()에 EngineSound를 조건부로 재생하고 멈추는 코드를 추가한다.if Input.is_action_pressed("thrust"): thrust = transform.x * engine_po..
토이프로젝트 2025.01.08 0

티스토리툴바