weixin minigame tutorial
1.0.0
이 저장소에는 다음이 포함되어 있습니다.
현재 데모에는 다음 기능이 포함되어 있습니다.
├───game.js : main entry point, Phaser. Game main function declared here
├───game.json : minigame configuration
├───images : static assets repository
└───js
├───game
│ ├───managers : each manager is a set of functions
│ │ ├───collisions.js : handles all collision events
│ │ ├───db.js : backend CRUD functions for leaderboard (based on Leancloud API)
│ │ ├───events.js : main events of the game functions
│ │ ├───generators.js : objects generators functions
│ │ ├───leaderboard.js : functions that handle leaderboard and ranking algorithms
│ │ ├───wechat.js : functions that handle WeChat-related API (getting user profile, user friends list etc...)
│ └───objects : Each object is a Class, with its separated file
│ ├───Background
│ ├───Bird
│ ├───Button
│ ├───Floor
│ ├───Pipe
│ ├───objects.js : singleton namespace window.objects where all the game objects live
│ ├───phases.js : different game phases (preload, create, update (called every frame), render (called every frame))
│ └───state.js : singleton namespace window.state where all the game states and parameters live
└───libs
└───lodash-modules
전체 구성 : 웹게임과 거의 유사
Wechat Minigames는 웹 기술을 기반으로 하며, 주로 사용되는 언어는 Javascript입니다. 시스템은 웹의 시스템과 유사합니다. 캔버스 요소에 액세스할 수 있으며 모든 프레임에서 캔버스 요소에 그림을 그릴 수 있습니다. WebGL API에 액세스할 수 있으므로 셰이더(GLSL 언어)를 사용한 계산에 GPU를 사용할 수 있습니다.
ctx.fillRect(25, 25, 100, 100);
ctx.clearRect(45, 45, 60, 60);
ctx.strokeRect(50, 50, 50, 50);
그러나 구현에는 몇 가지 차이점이 있습니다.
그러나 WebGL 및 Canvas API 구현은 대부분의 웹 브라우저에서 찾을 수 있는 기본 웹 구현과 다릅니다. 미니게임의 실행 환경은 iOS의 JavaScriptCore, Android의 V8입니다. 모두 BOM과 DOM이 모두 없는 환경을 실행하고 있습니다. 전역 문서 광고와 창 개체가 없습니다. 따라서 DOM API를 사용하여 Canvas 및 Image와 같은 요소를 생성하려는 경우 오류가 발생합니다. 공식 미니게임 문서(중국어)에 대해 자세히 알아보세요.
웹 라이브러리는 미니게임 환경에 적응할 수 있습니다.
웹과 미니게임 사이의 격차를 해소하기 위해 WeChat 미니게임 팀은 특별한 라이브러리인 weapp-adapter를 개발해 왔습니다. 목표는 웹 라이브러리를 미니게임과 호환되게 만드는 것입니다. 그러나 현재 라이브러리 구현은 여전히 불완전하고 불완전하며 작업하려는 각 타사 라이브러리를 수정하려면 추가 작업이 필요한 경우가 많습니다.
이미 많은 웹게임 엔진이 포팅되었습니다(공식 및 비공식적으로).
| 엔진 | 집중하다 | 상태 |
|---|---|---|
| 코코아 | 중국산 2D UI 기반 웹게임 엔진 | 공식적으로 지원됨 |
| 라야 | 중국 2D 및 3D 웹 게임 엔진 | 공식적으로 지원됨 |
| 백로 | 중국산 2D UI 기반 웹게임 엔진 | 공식적으로 지원됨 |
| 단일성 | 3D/2D 게임 엔진, 업계 표준 | 아직 지원되지 않음 |
| 페이저(웹) | 2D 웹 게임 엔진, 웹 게임 업계 표준 | 비공식 포트를 통해 작업 |
| Threejs | 3D 웹 엔진, 업계 표준 | 비공식 포트를 통해 작업 |
나만의 미니게임을 이미 코딩할 수 있나요? 예, 이미 자신만의 미니게임을 코딩할 수 있습니다! 문서부터 개발자 도구까지 필요한 모든 것이 공개적으로 제공됩니다.
아직 출시될 수 있나요? 아니요, 아직 게시할 수는 없지만 휴대전화에서 미리 볼 수는 있습니다. (IDE 프레젠테이션에 대한 자세한 내용은 다음을 참조하세요)
언제 출시되나요? 우리는 아직 모릅니다.
게임 그래픽 스타일: 2D와 3D가 모두 가능합니다.
WebGL에 대한 액세스 덕분에 GPU 가속이 적용되는 3D 게임도 표시할 수 있습니다.
성능: 웹 게임보다 약간 더 최적화된 시스템
시스템은 아직 초기 단계이고 베타 테스트 단계이지만 성능이 웹 게임이 할 수 있는 것과 매우 유사하다는 것을 이미 볼 수 있습니다. 현재로서 좋은 경험 법칙은 제한 사항 측면에서 웹 게임이 할 수 있는 것 이상을 기대하지 않는 것입니다.
크기는 여전히 주요 제약 사항입니다.
미니게임의 가장 큰 한계 중 하나는 크기입니다. Wechat은 현재 최대 4MB 패키지 게임만 허용합니다. 게임은 외부 서버에서 추가 자산을 다운로드할 수 있지만 게임이 시작될 때마다 해당 자산을 가져와야 한다는 점을 고려하세요. 따라서 게임은 자산 측면에서 다소 가벼워야 하며, 3D 게임은 로우 폴리 3D 개체와 낮은 품질의 텍스처를 사용해야 합니다.
웹 → 미니게임 변환: 기본 코드베이스에 크게 의존
웹게임을 미니게임으로 변환하는 것이 가능합니다. 그러나 사용된 특정 라이브러리와 게임 엔진에 따라 개발 프로세스는 며칠에서 몇 달까지 걸릴 수 있습니다. 특정 적용에 소요되는 시간을 추정하려면 게임 소스 코드에 대한 사전 감사가 필요합니다.
미니게임 → 웹전환 : 빨라요!
Phaser와 같은 미니게임 개발을 위해 표준 웹 게임 프레임워크를 사용하는 경우 코드는 대부분 이미 웹과 호환되므로 별다른 조정 없이 브라우저에서 작동합니다.
IDE 및 디버깅 도구는 미니앱과 동일합니다. 그러나 그 내용은 순전히 중국어로 되어 있습니다. 디버깅 경험은 전반적으로 매우 훌륭하지만, 젊기 때문에 다소 버그가 있을 수 있습니다.
여기에서는 명확성을 위해 전체 인터페이스가 영어로 번역되었습니다.
미니게임의 핵심 관심 포인트 중 하나는 WeChat 플랫폼에 내장된 소셜 기능에 원활하게 액세스하여 활력과 참여율을 높이는 것입니다. 다음은 주요 메커니즘과 사용 방법에 대한 프레젠테이션입니다.
현재 사용자 정보 얻기
wx.login({
success: function () {
wx.getUserInfo(userInfos)
}
})
귀하가 얻을 수 있는 기타 개인정보:
wx.getLocation() => user location
wx.getWeRunData() => get podometer data from werun
https://mp.weixin.qq.com/debug/wxagame/dev/tutorial/open-ability/authorize.html?t=201832
게임을 플레이한 친구 데이터 목록 가져오기
wx.getFriendCloudStorage()
게임을 플레이한 그룹 데이터 목록 가져오기
wx.getGroupCloudStorage()
미니 게임
페이저 게임 라이브러리
페이저 웹사이트
Phaser: 첫 번째 게임 튜토리얼 만들기
페이저 예
미리보기를 믿지 말고 항상 실제 장치에서 테스트하세요.
다음은 에뮬레이터에서는 작동하지만 실제 장치에서는 작동하지 않는 코드 조각의 예입니다.
static preload(game) {
game.load.image('bg', 'js/game/objects/Background/bg.jpg') => working on both emulator + phone
// game.load.image('bg', './js/game/objects/Background/bg.jpg') => working only on emulator
}
추가 작업이 필요한 경우가 많으므로 타사 라이브러리의 사용을 제한하세요.
lodash와 같은 라이브러리는 기본적으로 작동하지 않습니다. 실제로 로드를 달성하려면 소스 코드로 이동하여 DOM/BOM API에 따라 부품을 수정해야 하는 경우가 많습니다. Lodash에서는 전체 라이브러리를 한 번에 추가하는 것이 아니라 특정 모듈을 하나씩 추가하여 문제를 해결할 수 있습니다. 하지만 항상 그렇게 쉬운 것은 아닙니다!
npm install --save lodash.forEach
NOT
npm install --save lodash
더 쉽게 디버깅할 수 있도록 코드를 더 작은 파일로 청크하세요.
현재 IDE 디버깅 시스템은 Chrome 및 Firefox의 시스템과 다르게 작동합니다. 제가 겪은 좌절의 가장 큰 원인 중 하나는 문제가 발생한 파일을 제외하고는 문제가 어디서 발생했는지에 대한 정보 없이 매우 모호하고 불특정 오류 메시지를 표시하는 문제가 많다는 것입니다. 따라서 코드를 더 작은 덩어리로 나누는 것이 매우 중요합니다. 단 하나의 힌트도 없이 수천 줄 분량의 파일에서 오타를 찾는 것이 50줄 파일에서 오타를 찾는 것보다 훨씬 어렵기 때문입니다.
