본문 바로가기

분류 전체보기241

[Portfolio Log] WebRTC 기반 포폴 기록 6 플레이어 이동, 애니메이션, 좌우 Flip 처리 적용 토스트 메시지, 채팅, 캐릭터 변경 동기화 적용 내일 작업은 장면 전환시 룸 내부에 존재하는 플레이어의 정보를 처리하는 로직 미디어 수프 연동 작업, 마이크/카메라 ON/OFF 처리, 장치 설정 다이얼로그... 2023. 10. 8.
[Flutter] Git Repository 생성(협업 과정 고려) 1. 로컬 레포지토리 생성(깃허브 데스크탑 사용) 깃허브 데스크탑의 상단에 File, new Repository를 누른다. 이름, 설명, 경로, ignore 파일(Dart), 라이센스를 입력하고 생성한다. 2. gitignore 파일 수정 Android Studio flutter 기본 gitignore 파일에서 *.iml 파일만 제외한 것이다. 3. 누락 파일 추가(iml, 설정 파일 등) 루트폴더에 .idea 파일이 ignore처리 되어 있는지 확인한다. 루트 폴더에 iml 파일이 누락되어 있을텐데 추가한다. 안드로이드 폴더에 iml 파일도 같이 확인해준다. (Private 저장소에서만 처리) 안드로이드 jks파일, key.properties 파일 추가 4. 로컬 레포지토리 Publish Github .. 2023. 10. 7.
[Android / iOS] 테스트 앱 배포 과정 안드로이드와 iOS는 테스트를 하기 위한 앱을 배포하는 방식에서 차이가 있다. 안드로이드의 경우 release apk파일을 뽑으면 되고 iOS는 Testflight로 배포해야 한다. 1. Android 테스트 앱 android Native 앱이면 안드로이드 스튜디오 상단에서 build 탭, apk로 뽑으면 된다. flutter면 터미널에 build apk --release 이후 apk 파일을 안드로이드 기기에 설치하여 테스트한다. 2. iOS 테스트 앱 - iOS는 미리 앱 등록이 되어 있어야 하며, 단순히 테스트 목적이라면 소개 페이지, 이미지 등의 작업은 하지 않아도 된다. 매칭되는 bundleId 넣고, 앱 이름 정하고 추가하자. 참고: 앱 등록 방법 - xcode로 프로젝트를 열고 개발자 멤버십 .. 2023. 10. 7.
[Portfolio Log] WebRTC 기반 포폴 기록 5 플레이어의 영상을 출력할 video뷰와 장치설정 Dialog를 작업했다. div 내부에 비디오 태그로 처리되어 있다. 카메라, 마이크 상태는 텍스트를 활용하여 표시할 것이다. 장치설정은 메뉴를 클릭하여 자신이 원하는 장치를 선택하도록 할 것이다. 마이크 테스트 버튼을 누르면 테스트를 진행할 수 있다. 내일은 멀티플레이 기능을 작업하려고 한다. 이번 주말 내로 개발이 마무리 되었으면 참 좋겠다. 2023. 10. 7.
[Flutter] 프로젝트 구성 변경 정리(패키지명, 앱 이름 등) 테스트 코드를 작성한 이후에 프로젝트 구성을 변경하여 그대로 프로젝트를 가져가고 싶은 경우에 참고하면 된다. 공통사항 안드로이드, iOS 앱 이름은 일단 영어로 잡고 나중에 Localization 하는 것을 추천한다. (iOS에서는 한글로 넣으면 오류난다고 함) 수정한 이후에 Android, iOS부분에서 패키지명, 앱 이름 등이 정상적으로 나오는지 확인한다. 변경 사항 1. 루트 프로젝트 폴더 이름 2. flutter 부분 - 패키지명 수정 pubspec.yaml name:** 수정( 프로젝트명 같은 상징적인 의미로 잡자 ) - 참조 패키지 모두 수정 package:name/~.dart 3. 안드로이드 부분(Manifest) - 안드로이드 패키지명(applicationId) - 안드로이드 폴더 경로(c.. 2023. 10. 6.
[Portfolio Log] WebRTC 기반 포폴 기록 4 오늘은 캐릭터 변경 기능, 닉네임 변경, 마이크/카메라 버튼 처리를 추가했다. HTML에서 Dialog 태그도 처음 써봤는데 그냥 적당히 괜찮은 것 같다. HTML, CSS, JS로 개발을 하니까 dom에서 요소를 찾아와서 처리하는데, 안드로이드의 findViewById가 생각이 나더라. 내일은 장치 설정 UI와 영상 UI를 개발할 것이다. 그 이후에는 멀티플레이 기능을 추가하면 되겠지. 끝. 2023. 10. 5.
[Phaser] 미니맵 미니맵 생성 코드 미니맵 뒤에 처리를 하기 위한 사각형을 만들어주고 있다. 실제 맵 크기의 0.1을 곱하여 적절하게 나오도록 값을 설정해준다. (비율은 개발하는 환경에 맞추어 변경되어야 한다. mapWidth, mapHeight 값도 마찬가지) // 미니맵 추가 let { width, height } = this.game.canvas; // offset 0.5, leftTop을 기준으로 배치한다. this.minimapBackground = this.add .rectangle( parseInt(this.mapWidth * 0.05 + width - this.mapWidth * 0.1) - 4, parseInt(this.mapHeight * 0.05 + height - this.mapHeight * 0.1.. 2023. 10. 4.
[Phaser] Toast 메시지 채팅으로 입력한 데이터를 Toast 형태로 출력해준다. 미리 Text와 graphics 객체를 만들어서 Container로 묶어준다. createMessageContainer() { // 메시지 컨테이너를 생성한다. 세부 설정은 하지 않음 this.messageWidth = 0; this.messageHeight = 0; this.messagePadding = 2; // positions are relative to the container this.messageRect = this.add.graphics(); this.messageText = this.add .text(this.messagePadding, this.messagePadding, "") .setFont("10px") .setColor("#.. 2023. 10. 4.
[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.

티스토리툴바