phaser5 [Portfolio Log] WebRTC 기반 포폴 기록 4 오늘은 캐릭터 변경 기능, 닉네임 변경, 마이크/카메라 버튼 처리를 추가했다. HTML에서 Dialog 태그도 처음 써봤는데 그냥 적당히 괜찮은 것 같다. HTML, CSS, JS로 개발을 하니까 dom에서 요소를 찾아와서 처리하는데, 안드로이드의 findViewById가 생각이 나더라. 내일은 장치 설정 UI와 영상 UI를 개발할 것이다. 그 이후에는 멀티플레이 기능을 추가하면 되겠지. 끝. 2023. 10. 5. [Portfolio Log] WebRTC 기반 포폴 기록 3 오늘은 채팅 UI를 작업했다. 간단하게 닫는 버튼과 좌측 하단에 열기 버튼을 두었다. 기존에는 메시지 처리만 있었는데 다른 작품을 참고하다보니 하나씩 늘어났다. https://github.com/kevinshen56714/SkyOffice?ref=reactjsexample.com 내가 만들길 원하는 작품과 매우 유사한 형태인데, 이쪽에서 입력한 메시지에 따라 Toast를 출력해주길래 나도 추가했다. 다음으로 하단 컨트롤러를 추가했는데, CSS쪽에 position 속성을 사용하여 개발하니까 금방 하더라. 참고로 아이콘을 추가한 것이 아니라 그냥 이모지를 출력해서 버튼처럼 사용하고 있다. 왼쪽에 사과 버튼을 눌러서 캐릭터(과일 친구들) 변경이 가능하도록 할 거고, 마이크/카메라는 on/off, 설정은 따로 .. 2023. 10. 4. [Phaser] UI Text, Camera, Switching Scene UI Text 장면에서 text를 추가한다. scrollFactor를 1로 주면 카메라의 좌표에 영향을 받게 된다. (World 상에 출력하고 싶다면 1) createTextInfo() { this.posText = this.add .text(8, 8, "", { font: "16px", fill: "#000000", }) .setScrollFactor(0) .setDepth(100); } 플레이어의 x, y 좌표와 fps 정보를 출력한다. updateTextInfo() { this.posText.setText( `x: ${Math.round(this.player.x)}\ny: ${Math.round( this.player.y )}\nfps: ${Math.round(this.game.loop.actual.. 2023. 10. 3. [Portfolio Log] WebRTC 기반 포폴 기록 2 타일맵 충돌체, z-index 수정, 카메라 추가, 장면 전환 작업을 추가했다. 워낙 Phaser 자체가 쉽게 잘 되어 있어서 개발하는데 크게 막히는 부분은 없는 듯 하다. 어떤 기능이 필요한데 싶으면 이미 함수로 지원을 해주고 있어서 가져다가 쓰면 된다. 1~3번까지 1일이면 된다고 생각했는데, 실제로는 matter plugin에서 오브젝트를 생성하여 충돌 처리를 하는 부분이나 장면 전환 부분에서 생각보다 시간을 많이 썼다. 맵 찍는 것도 꽤 걸렸고... 1. 타일맵 충돌체 개선 2. 타일맵 z-index 값 조정 3. 집 내부에 들어갔을 때 사용할 Scene 구현(문 오브젝트랑 상호작용) 다음은 멀티플레이 관련 기능들을 작업할 예정이다. 채팅 UI, 캐릭터 선택 UI, 소켓 처리 등을 작업하지 않을까.. 2023. 10. 3. [Phaser] Animation, TileMap Phaser Make your first game(https://phaser.io/tutorials/making-your-first-phaser-3-game/part1) Tutorials, Samples - Official Sample과 참고자료들 처음 게임 만드는 예제는 정말 강추한다. Phaser 애니메이션 처리 방식 Phaser의 애니메이션은 이미지를 넣고 소스상에서 애니메이션을 만드는 방식도 가능하고, json으로 아틀라스 이미지의 offset 정보와 animation 정보(FPS, 참조 image 등)를 처리하는 형태도 가능하다. Atlas 애니메이션 편집 툴(Frame 정보 json으로 뽑기, 애니메이션 정보 json으로 뽑기) https://gammafp.com/tool/atlas-packe.. 2023. 9. 28. 이전 1 다음
