토이프로젝트 16

고도 엔진 슈팅게임 #3: 바위 씬

[바위 씬 생성]RigidBody2D로 새 씬을 생성한 후 Rock 으로 이름을 변경한다.Rock의 자식으로 Sprite2D를 추가하고 Texture 에 바위 이미지를 추가한다.Rock의 자식으로 CollisionShape2D를 추가한다. 히트박스는 생성될 바위의 모양에 맞게 동적으로 생성해 줄 것이므로 아직 설정하지 않는다. 바위는 플레이어처럼 움직이다가 멈추면 안되고 계속 날아다녀야 하니 Linear와 Angular의 Damp는 0으로, Damp Mode 는 Replace로 변경한다.또 바위를 서로 튕기게 만들어야 하므로 Physics Material Override 에서 '새 Physics Material'을 눌러주고 상세 옵션에서 Bounce를 1로 설정한다. Rock 에 스크립트를 붙여서 다음 ..

토이프로젝트 2024.10.01

고도 엔진 슈팅게임 #2: 화면이동, 슈팅

[화면 이동]screen wrap 기능을 넣을 것이다.플레이어가 화면의 끝에 다다르면 반대편으로 나오는 것을 말한다. 스크립트 상단에 다음 코드를 추가하고 var screensize = Vector2.ZERO _ready() 에 다음 코드를 추가한다.screensize = get_viewport_rect().size # 화면 크기  그리고 플레이어가 한쪽 끝에 다다르면 반대편으로 이동시켜야 하는데, 여기서 문제가 있다.다음과 같은 코드로 플레이어를 이동시키면 된다고 생각할 수 있지만func _physics_process(delta): ... if position.x > screensize.x: position.x = 0 if position.x screensize.y: position.y = 0 ..

토이프로젝트 2024.09.24

고도 엔진 슈팅게임 #1: 플레이어 움직임 구현

[프로젝트 설정]새 프로젝트를 생성한다.커스텀 입력 액션을 설정할건데, 사용자가 어떤 키, 마우스 혹은 어떤 디바이스로 게임을 하는지 알 필요 없이 '점프' 입력에 반응하도록 설정할 수 있다.그리고 사용자가 게임 설정에서 키 입력을 커스터마이징 할 수 있는 옵션을 제공할 수 있게 된다. 상단 메뉴의 [프로젝트] -> [프로젝트 설정] 에서 [입력 맵] 탭으로 이동한다.다음의 입력 액션 4가지를 생성해준다.rotate_leftrotate_righttrustshoot그 후 리스트 오른쪽의 + 를 클릭 해 어떤 입력이 있을때 액션으로 간주할 지 설정한다.다음과 같이 WASD와 방향키를 둘 다 입력으로 설정할수도 있다.   [물리엔진]고도는 3가지 physics body 를 제공한다.StaticBody2D: 정..

토이프로젝트 2024.09.23

고도 엔진으로 게임 만들기 #4: 효과, 아이템, 장애물 등

이번 편에서 할 것게임 기능과는 무관하지만 있으면 게임을 풍성하게 만들어줄 juice 요소들 추가하기그리고 마지막으로 배포하기  [이펙트]동전을 주울때 크기가 커졌다가 사라지는 효과를 줄 것이다.트위닝(=이징) 예제는 다음 링크를 참고하면 여러가지 예제를 볼 수 있다.https://easings.net/ 그런데 플레이어가 동전에 닿은 순간 동전이 바로 제거되지 않으면 곧바로 area_entered 시그널이 다시 트리거되어 점수가 중복으로 증가 되어버린다.이때문에 collision shape 를 비활성화해서 동전이 충돌이 트리거되지 못하게 해야한다.coin 의 pickup 함수에 코드를 추가해보자.func pickup(): $CollisionShape2D.set_deferred("disabled", tru..

토이프로젝트 2024.09.20

고도 엔진으로 게임 만들기 #3: 유저 인터페이스

[미리보기]이번 편에서는 시간이나 점수 같은 유저 인터페이스를 업데이트 해서 보여주고, Game Start & Game Over 를 구현할 것이다.    [사용자 인터페이스]이번에는 사용자 인터페이스를 만들 차례다.점수, 시간, 게임 오버 메시지, 시작 버튼 등이 그려질 것이다. [새 씬]으로 새로운 씬을 생성한 뒤 CanvasLayer 노드를 추가해 주자.CanvasLayer 에 그리는 UI 요소는 다른 요소들의 위에 위치해서 다른 게임 오브젝트로 가려지지 않는다. 만든 노드의 이름은 HUD (Heads-Up Display)로 변경한다.   (1) 게임 타이틀Label 노드를 추가한다. 이 노드는 게임 제목이 될 것이기 때문에 화면 중앙에 위치할 것이다.직접 조정해도 되지만 [앵커 프리셋] 에서 '가로..

토이프로젝트 2024.09.18

고도 엔진으로 게임 만들기 #2: 동전씬과 메인씬

[미리보기]이번 편에서 할 것: 플레이어가 모을 동전 씬과 게임 요소들이 그려질 수 있는 메인 씬 만들기   [동전 씬 만들기]Player 씬을 만들었던 것처럼 Coin 씬을 만들어보자. [씬] - [새 씬] 으로 동전 씬을 만든다.Player와 동일하게 노드를 만들어준다. Area2D 노드를 만든 후 자식으로 AnimatedSprite2D, CollisionShape2D 노드를 만들어준다.Area2D 는 Coin으로 이름을 변경해주자. 그 후 반드시 저장을 해서 coin.tscn 파일로 저장을 해주자.    [애니메이션]여기까지 완료되면 애니메이션을 추가할 차례다.플레이어와는 다르게 동전은 한가지 애니메이션만 있으면 된다.동전을 반짝여 보이게 해 줄 애니메이션용 이미지를 추가해준다.  ([불러오면 자동..

토이프로젝트 2024.09.14

고도 엔진으로 게임 만들기 #1: 플레이어 씬

[미리보기]이번 편에서 할 것: 플레이어 애니메이션과 움직임 구현    [환경 세팅] https://godotengine.org/ 에서 최신 버전 고도를 다운로드한다.* 스팀에서도 설치가능 (godot 로 검색 후 설치)   [프로젝트 생성하기]godot 를 실행하고 [+새로 만들기] 버튼으로 프로젝트를 생성한다.* 새로 만들 프로젝트 이름을 적어주고 프로젝트 이름 인풋 옆에 [폴더 만들기] 로 폴더를 먼저 만들어줘야 한다.    그 후 프로젝트 설정을 하면 되는데 앱용으로 게임을 만들것이기 때문에 세로 뷰로 창을 설정한다. 세로로 게임화면 설정하기1. [프로젝트 설정]으로 들어간다.  [창] 탭을 선택하고 아래 설정을 해준다.뷰포트 너비 480 / 높이 720‘스트레치' 에서 ‘모드'를 canvas_i..

토이프로젝트 2024.08.31

[Dart] Mac에서 Dart 설치하기

0. Homebrew 설치하기 (설치되어 있다면 바로 1번으로) a. 아래 명령어를 터미널에 입력해서 Homebrew가 설치되어 있는지 확인하자. brew -v 버전 정보가 나오지 않는다면 Homebrew가 설치되지 않은 것이다. b. Homebrew를 설치하기 위해 아래 명령어를 터미널에 입력하여 설치하자. /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" c. 다시 brew -v 로 버전 확인을 통해 설치가 완료되었는지 확인하자. ************************************************************************* 만약 아래 같은 에러..

토이프로젝트 2023.10.13

[React] 개발과 배포시 cors에러 해결 기록(with. heroku cors-anywhere)

토이 프로젝트가 마무리 단계에 다다라서 배포 단계를 앞두고 있었다. 저번처럼 간단하게 깃페이지를 이용해 배포하려는데 로컬 환경에서는 공공데이터 API를 잘 불러오더니 배포하고 나니 통신 에러가 나는 것이었다. 콘솔을 보기 전에도 UI는 0.1초 정도 잘 나오다 흰 화면만 나오길래 'axios에서 뭔가 문제가 발생했나 보군' 했다. 그제야 생각해보니 로컬에서 개발할 때 cors에러 때문에 package.json에 proxy설정을 해줬었는데 이게 배포 시에는 적용이 안되어서 따로 무슨 처리를 해줘야 한다고 봤었던 기억이 났다. 처음에는 이 상황을 제대로 이해를 못 했는데 그래서 더 많이 헤맸다. 첫 번째로 시도해본 방법은 일단 .env 설정을 추가해주는 것이었다. development와 production ..

토이프로젝트 2022.02.26

[공공데이터 활용] HTML canvas태그: 시간별 기온 차트 만들기 #2

이번에는 차트에 색상을 적용해야 한다. 색상 적용 예제도 MDN에 잘 나와있다. https://developer.mozilla.org/ko/docs/Web/API/Canvas_API/Tutorial/Applying_styles_and_colors#a_createlineargradient_example 스타일과 색 적용하기 - Web API | MDN 도형 그리기 장에서는 기본 선과 채우기 스타일만 사용했습니다. 여기서 우리는 그리기를 조금 더 매력적으로 만들 수있는 캔버스 옵션을 살펴볼 것입니다. 그리기에 다른 색상, 선 스타일, 그 developer.mozilla.org 스타일을 적용할 곳은 총 세 가지이다. 1. 따뜻한 색 - 차가운 색으로 배경 입히기 2. 차트의 라인에 색상과 굵기 주기 3. 폰트..

토이프로젝트 2022.02.01