짧은 만화

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

인기 글

[CSS] 말줄임(...)표: 한줄 또는 여러줄 말줄임 표시

아래처럼 말줄임표를 표시하는 방법을 알아보자. 1. 한 줄일 때 말줄임표 말줄임표를 적용해야 하는 텍스트가 한 줄인 경우는 아래처럼 css를 작성한다. div { width: 200px; /* 오버되면 말줄임 적용할 최대 넓이 */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } 결과 2. 여러 줄일 때 말줄임표 말줄임표를 적용해야 하는 텍스트가 한 줄인 이상인 경우는 아래처럼 css를 작성한다. div { width: 200px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; /* 2줄 넘어가면 말줄임 */ -webkit-b..
WEB 2023.03.30 0
[React/CSS] 리액트 줄 바꿈: 자바스크립트 줄 바꿈(\n) 안됨

문제 상황 문자열을 줄바꿈을 해주고 싶을때가 있다. 문자열 자체에 정규식 개행문자를 추가했지만 JSX 안에서 보여줄 때, 줄바꿈이 먹히지 않는다. const str = '줄바꿈\n테스트'; 줄바꿈 html 태그인 을 넣어도 태그가 문자 그대로 출력된다. 해결방법 JSX안에서는 개행문자 \n 이 먹히지 않아서 일어나는 문제이다. 이럴때는 CSS에서 아래처럼 설정해준다. white-space: pre-line; * 참고로 여기서 줄바꿈 뿐 아니라 들여쓰기도 필요하다면 아래 옵션으로 설정해준다. white-space: pre-wrap; 공식 문서: https://developer.mozilla.org/en-US/docs/Web/CSS/white-space white-space - CSS: Cascading S..
React 2022.11.16 0
2년차 비전공자 프런트엔드 개발자의 6개월간의 이직 기록

요약 회사를 다니면서 3개월 + 퇴사 후 3개월 = 총 6개월간 이직 준비를 하였고 지금은 이직에 성공하여 번개장터에서 개발자로 일하고 있다! 2년 차 개발자였지만 비전공자에 거의 0년 차 개발자 수준이었던 내가 이직을 하게 된 과정을 정리하려고 한다. 이직 결심 2년간 중소기업 쇼핑몰에서 풀 스택 개발자(말이 풀 스택이지 프런트엔드, 백엔드 구분조차 없는 곳+개발자 없음으로 그냥 모든 일을 다 했다..)로 일했다. 이직을 결심했던 건 사실 꽤 오래되었는데 내일 채움 공제 적금을 넣고 있어서 1년만 더 참자.. 10개월만 더 참자.. 6개월만... 3개월만... 해가면서 2년을 버텨냈다. 이직을 결심한 이유는 크게 두 가지로 압축할 수 있다. 1. 개발 문화 없음, 개발자가 성장할 수 없는 환경 2. 낮..
기타 2022.07.01 0

티스토리툴바