seo원문은 위챗 공중호에 선발되었다: MinProgram
원작자: 화숙
Cocos 는 이미 전재 허가를 받았다.
얼마 전 설날이 지나서 집에서 아이를 보고 밖에 나가 놀 수가 없어서, 코드를 달았고, 물리적 엔진을 기반으로 하는 작은 게임을 하고 싶다는 생각이 들자, Cocos Creator 를 유쾌하게 열었다. (윌리엄 셰익스피어, Northern Exposure (미국 TV 드라마), 스포츠명언)
그리고 이번 주말까지 비교적 완벽한 게임인 demo 가 온라인에 올라왔다.
비디오 효과는 다음과 같습니다.
맡은 일
1 년여 전, 나는 작은 게임 개발을 배우기 시작했고, 전체 스택 방식으로 작은 게임을 독립적으로 개발하려고 시도했다. 작은 게임을 하는 것은 모두 공부하는 마음을 품고 있기 때문에, 잘하지 못하는 것이 있으면 잠시 배워라. (윌리엄 셰익스피어, 햄릿, 공부명언) 마지막으로 전체 게임의 기획, 상호 작용, 비주얼 디자인, 오디오 디자인, 프런트 엔드 개발, 백그라운드 개발, 성능 튜닝, 기능 테스트 등을 모두 포괄하고 있습니다.
사용된 IDE 는 다음과 같습니다. (참고용으로만, 다른 일행은 더 좋은 도구 추천이 있으면 댓글을 기억해 주세요.)
Photoshop, 주로 상호 작용 및 시각 원고 디자인에 사용됩니다.
Cocos Creator 는 주로 시각적 복원, 주요 논리 개발, 교차 측 디버깅 및 컴파일에 사용됩니다. 개인적으로이 슈퍼 파워 게임 개발 도구라고 생각합니다全球排名第一오피스타 공식 홈페이지의 입구를 어떻게 찾습니까. component 의 메커니즘을 직접 시각화하고 다양한 물리적 엔진, 입자 엔진, UI 구성 요소 등의 기능을 통합하여 게임 UI 및 일부 특수 효과 논리의 R&D 비용을 크게 절감합니다. 하지만 작은 게임 버전의 컴파일 속도는 여전히 느리네요.
Visual Stuido Code, 코드 개발. 요즘 가장 유행하는 코드 작성 도구인 것 같아요. 무료이고 안정적이에요!
위챗 개발자 도구, 위챗 전용 기능 개발, 클라우드 개발, 게임 검토. 이전 버전의 위챗 개발자 도구에 비해 경험이 많이 최적화됐지만 파일 감청쪽에 문제가 있어 Cocos Creator 와의 연계로 Cocos Creator 가 파일을 컴파일하고 위챗 개발자 도구가 오류를 보고하는 문제가 자주 발생합니다.
Cool Edit Pro, 오디오 리소스 조각.
TexturePacker, sprite 리소스 세트가 자동으로 구축됩니다.
구글 크롬, 웹판 게임 디버깅. 일부 성능 튜닝은 chrome 위에 놓을 수 있으며, 매우 전문적인 디버깅 도구가 있습니다.
관련 IDE 에서 알 수 있듯이, 실제로 게임을 개발하려면 많은 콘텐츠를 고려해야 합니다. 게임이 제공하는 기능은 많지 않지만 실제 연구 개발 시간은 짧지 않고 설날 연휴 (WTF, 분명히 며칠밖에 걸리지 않습니다.)
사실, 게임 개발은 페이지 개발보다 전자가 더 어렵다고 생각합니다. 통합 기술, 세계관 건설, 콘텐츠 건설, 미술 건설, 사운드 디자인, 프로그램 알고리즘 등 여러 방면에서 섭렵이 필요하다고 생각합니다. 이 안의 각 내용은 내가 오랫동안 연구하기에 충분하다.
문외한 말은 독자적으로 게임을 하는 사람들을 잘 대해주세요. 그들은 모두 고부하의 업무 압력으로 개발과 학습을 하고 있습니다.
(문장 편폭이 약간 길어서 닭고기 수프를 보고 싶고, 기술적인 세부 사항을 보고 싶지 않지만, 바로 끝으로 점프할 수 있다.)
문외한의 게임 기획
자신의 계획 능력은 아마추어이지만, 개발을 시작하기 전에는 아무리 허름한 계획 절차도 절약할 수 없고, 사전 계획은 빠른 개발에 도움이 된다.
1. 게임의 본선
앞서 예상했던 이야기 장면은 트럭을 몰고 숲 속에서 목재를 운송하는 것이었고, 핵심 놀이는 간단하다. 나무 상자를 지정된 지역으로 운반하는 것이다. (알버트 아인슈타인, Northern Exposure (미국 TV 드라마), 스포츠명언)
전체 게임은 시뮬레이션 물리적 장면을 기반으로 합니다. 유일한 초현실적 기능은 파란색 잉크로 그린 선이 솔리드화되어 물리적 충돌체가 되어 플레이어가 다리, 용기, 장애물 등을 만들어 운반을 도울 수 있다는 것입니다.
2. 콘텐츠 구축 수단
콘텐츠 구축 문제를 해결하기 위해 게이머가 스스로 수준을 만들 수 있다는 개방적인 모델을 게임에 제공했습니다.
텔그레이엄 공식 다운로드 방법을 찾는 방법
이 경우 수준은 동적으로 추가될 수 있어 누구나 언제 어디서나 휴대전화로 이 게임에 대한 관문을 만들 수 있고, 나도 컴퓨터를 벗어나 게임을 위한 초기 관문을 쉽게 설계할 수 있다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 컴퓨터명언)
이를 위해서는 게임 개발에서 원래 웹 디자인의 구성 요소화 사고에 적용해야 합니다. 게임에 나타날 수 있는 요소를 공통 구성 요소로 추상화한 다음 플레이어가 드래그하여 다른 수준을 디자인할 수 있도록 편집 모드를 구축해야 합니다.
3.telegram 의 중국판 다운로드 사이트는 어떤 변환 메커니즘입니까
게임은 금화라는 개념을 도입했다. 이는 게임 세계 전체의 통용화폐로, 현재 구상에서 금화에 주어진 역할은 두 가지다. A. 20 대 1 로 힌트를 교환할 수 있는 기회; B. 2000 대 1 로 트럭 피부 구입 (아직 실현되지 않음)
금화는 서명, 공유, 비디오 시청 등 비교적 간단하고 난폭한 방식으로 획득된다. (아직 1000 명의 누적 등록자가 되지 않아 기능을 놓지 않았다.)
Cocos Creator 개발 경험
내용이 너무 많기 때문에 전반적인 개발 논리는 자세히 설명하지 않습니다. 개발 과정에서 유용한 경험을 드리겠습니다.
레이아웃 정보
Cocos Creator 는 이 게임에서 두 가지 실용적인 레이아웃 구성 요소를 제공합니다.
1. 위젯, 요소를 임의의 위치에 적응시킬 수 있습니다. 이것은 상당히 실용적인 컨트롤이다. 사용 방법은 매우 간단해서 각종 기종의 적응형 배치가 단번에 고려된다.
2.Layout, 게임의 Node 가 웹 DOM 과 같은 인기 있는 레이아웃 기능을 가질 수 있도록 합니다. 일반적으로 사용되는 세 가지 유체 배치 방법 (가로, 세로 및 그리드) 을 제공합니다. 이 구성 요소는이 게임의 컨트롤 컨테이너에 특히 적합합니다.
애니메이션 정보
Cocos Creator 가 제공하는 애니메이션 개발 키트는 매우 강력합니다.
두 가지 점이 있습니다.
1. 애니메이션 정의, Cocos Creator 에서 Node 에 애니메이션을 추가할 때 cc.Animation 구성 요소를 추가한 다음 animation-clip 을 만들어 애니메이션의 속성과 프레임 상태를 시각적으로 편집하면 애니메이션을 빠르게 만들 수 있습니다.
2. 애니메이션 이벤트 수신, Cocos Creator 의 애니메이션 컨트롤에는 Node 에 해당하는 사용자 스크립트 구성 요소에 정의할 수 있는 애니메이션의 한 프레임에 대한 사용자 정의 수신 이벤트를 정의할 수 있는 기능이 있습니다. 예를 들어 물리적 게임에 통과할 때 탄상자 애니메이션이 있고 애니메이션이 거의 재생될 때 오디오가 재생됩니다.
물리적 엔진 정보
Cocos Creator 의 물리적 엔진은 프로그램 시작 시 다음과 같이 매우 강력합니다.
Cc.director.getphysicsmanager (). enabled = true;
전체 게임 세계는 물리적 수신 상태로 들어가고, 강체로 정의된 모든 노드 (cc.RigidBody 구성 요소 추가) 는 물리적 특성을 직접 가지며, PhysicsCollider 컨트롤을 추가하여 Node 가 지정된 핫스폿의 물리적 충돌 특성을 가질 수 있도록 합니다.
충돌체에는 매우 유용한 방법, getAABB 가 있습니다. 이는 충돌체 포위 상자를 얻는 방법입니다. rect 의 containsRect 방법과 결합하여 직사각형 영역에 충돌체가 포함되는지 여부를 실현할 수 있습니다. 물리적 게임에서 상자와 대상 영역의 수신 기능은 이에 따라 수행됩니다.
구체적인 코드:
//자체 경계 상자 가져오기
Varselfaabb = this.node.getcomponent (cc.physicspolygoncollider).
GetAABB () 를 사용합니다
If (기타 aabb.containsrect (자체 AABB)) {
}
또한 물리적 엔진에는 보다 실용적인 구성요소인 관절 구성요소가 있습니다.
Telegram 공식 홈페이지가 어떤 게임인지, 자동차 바퀴에 사용되는 물리적 엔진의 WheelJoint 컨트롤과 같은 일반적인 물리적 장면을 정의할 수 있습니다.
이 컨트롤은 기관차 바퀴의 물리적 효과를 시뮬레이션하여 바퀴가 강체와 일정한 거리를 두고 자전할 수 있도록 합니다.
실제로 이 유형의 관절 구성요소 외에도 공식에서는 Cocos Creator 의 공식 개발 문서를 참조할 수 있는 다양한 관절 구성요소를 제공합니다.
Https://docs.cocos.com/creator/manual/ko/physics/physics/joint-component.html
참, 한 가지 더 언급하겠습니다.
Cc.director.getPhysicsManager ()
이 코드는 전역 물리적 관리 객체를 반환합니다. 이 게임에서는 다음 두 가지 방법을 사용합니다.
1. 특정 좌표 점 아래에 물리적 충돌이 있는지 여부를 감지하는 1.testPoint 메서드로, 물리적 게임에서 강체에 선을 그릴 수 없는 기능은 이에 따라 수행됩니다.
2.rayCast 메서드-지정된 시작 지점에서 끝 사이의 광선이 통과하는 강체 모음을 가져옵니다. 물리적 게임에서 선이 강체를 만난 후 계속을 금지하는 기능은 이에 따라 수행됩니다.
이 방법의 기본 구현 논리는 상당히 복잡하고, 각종 기하학 알고리즘 등, 어차피 기하학수학이 잘 배우지 못한 화숙은 원생적인 방식으로 실현해야 한다면 겨우 좌절한 효과를 얻을 수 있지만, Cocos Creator 는 직접 모두 호출할 수 있도록 캡슐화되어 매우 편리하다. (윌리엄 셰익스피어, Northern Exposure (미국 TV 드라마), 원어민, 원어민, 자기관리명언)
프리캐스트 객체 정보
프리캐스트 개체는 Cocos Creator 에서 매우 중요한 노드 처리 메커니즘입니다.
Https://docs.cocos.com/creator/manual/ko/asset-workflow/prefab.html
한 노드를 장면처럼 개별적으로 파일로 저장한 다음 다른 장면에서 참조하여 다음을 통과할 수 있습니다.
Cc.instantiate ()
노드 논리를 재사용할 수 있도록 프리캐스트 객체 노드를 복제하는 방법이 노드 구성 요소에 가장 적합합니다.
물리적 게임에서 "제작 모드" 아래의 모든 지도 요소는 실제로 동일한 사전 제작 개체를 기반으로 합니다.
"제작 모드" 또는 "침입 모드" 의 지도 요소에 대한 기본 데이터 모델은 해당 사전 제작 객체에서 가져온 것으로, 새로운 지도 요소가 필요한 경우 이 사전 제작 객체를 수정하여 전체적으로 적용할 수 있습니다. 매우 편리하다고 할 수 있습니다.
하지만 프리캐스트 대상은 성능에 어느 정도 역작용을 한다는 점에 유의해야 합니다. 특히 Cocos Creator 포럼을 뒤집을 수 있습니다. 양날의 검이라고 할 수 있습니다.
Camera 정보
Cocos Creator 버전 2.0 이 camera 의 논리를 최적화했다고 들었는데, 사용해 봤는데, 현재 camera 는 그룹과 연결되어 있고, 게임에서 여러 개의 camera 를 정의하여 group 의 Color/Depth/Stencel 을 처리할 수 있고, 물리적 게임에서는 camera 를 사용할 수 있습니다.
또한 camera 를 사용하면 스크린샷이나 돋보기 효과를 빠르게 얻을 수 있습니다.
Touchmove 콜백 메서드의 관련 코드:
Varcamera = this.assistcamera.getcomponent (cc.camera);
//새 RenderTexture 를 만들고 camera 의 targetTexture 를 새 RenderTexture 로 설정하여 camera 의 내용이 새로 만든 RenderTexture 로 렌더링되도록 합니다.
Lettexture= newcc.RenderTexture ();
Letgl= cc.game._renderContext;
//스크린샷 내용에 Mask 구성 요소가 포함되어 있지 않은 경우 세 번째 매개 변수를 전달하지 않아도 됩니다
Texture.initwithsize (100,100, gl.stencil _ index8);
Camera.targetTexture= texture;
//카메라를 한 번 렌더링하면 내용을 RenderTexture 로 한 번 업데이트합니다
This.assistCamera.x= touchLoc.x
This.assistCamera.y= touchLoc.y
Camera.render ();
Varsf = newcc.spriteframe (texture)
This.node.targetassist.getcomponent (cc.sprite). spriteframe = SF
Camera 의 용법을 알고 싶고, 공식 홈페이지에서 제공하는 demo 를 연구할 수 있으니, 여기서는 자세히 설명하지 않겠습니다.
Https://github.com/cocos-creator/demo-camera
성능 튜닝 정보
솔직히 말해서, 나는 Cocos Creator 의 기본 원리를 너무 깊이 이해한 적이 없기 때문에 성능 최적화는 이 프로젝트로부터 약간의 기교를 줄 수 밖에 없다. 다음은 조금 이야기해 보자.
물리 게임은 초판이 처음 생겼을 때 성능이 특히 나빴고, 나중에는 세 가지 최적화 작업을 했다.
1. 자동 결합
DrawCall 을 낮추는 것은 게임 렌더링의 효율성을 높이는 매우 직접적이고 효과적인 방법이며, 두 DrawCall 을 하나의 DrawCall 로 결합할 수 있는지 여부에 대한 매우 중요한 요소는 두 DrawCall 이 동일한 맵을 사용하는지 여부입니다. 따라서 공식적으로는 합치는 것이 좋습니다.
하지만 내 프로젝트에 그렇게 많은 조각들을 썼는데, 이때 내가 합도를 하게 하면, 어찌 나를 죽이지 않겠는가! 고민 끝에 Cocos Creator 가 강력한’ 자동 아틀라스’ 를 제공한다는 사실이 밝혀졌습니다.
몰라, 깜짝 놀란다. 이 기능은 현재 디렉토리와 하위 디렉토리에 있는 모든 그림 파일을 지정된 알고리즘으로 병합하여 스프라이트 그림으로 통합하고 기존 스프라이트 프레임 참조를 자동으로 업데이트하며, 단번에 모든 조각을 큰 그림으로 합성하여 필요에 따라 호출할 수 있다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), Northern Exposure (미국 TV 드라마), 예술명언
인터넷 요청은 수십 개에서 한두 개로 직접 바뀌었다.
하지만 … 나는 drawcall 도 많이 떨어지지 않았다는 것을 알았다. 왜 그런지 생각할 시간이 많지 않아, 이 방식은 내가 먼저 신경쓰지 않을 거야. (윌리엄 셰익스피어, 템페스트, 시간명언)
2. 노드 축소
노드가 릴리스되지 않으면 반드시 drawcall 이 상승할 수 있습니다. 이런 방향으로 생각하면서 cc.instantiate () 가 생각납니다. 물리적 게임에서는 이 방법만이 능동적으로 노드를 추가할 수 있습니다. 그러면 생성된 임시 노드만 제때에 파괴하면 됩니다. 하지만 복제가 끝나면 removeFromParent 가 호출됩니다.
그러나 나중에 데이터를 확인한 결과 원래 removeFromParent 메서드가 실행된 후 노드가 자동으로 삭제되지 않고 실제로 node 의 destroy 메소드가 삭제됩니다. 어처구니가 없다. 데스트리로 바꿔야 합니다. 그래서 전체 검색 removeFromParent, 하나씩 교체, drawcall 성공적으로 하향 조정 됩니다.
3. 코드 논리 최적화
위의 일반적인 수단 외에도 자체 코드를 최적화해야 합니다. 이 게임의 코드 논리에서 최적화할 가능성이 가장 높은 부분은 "선 그리기" 섹션입니다.
선을 그리는 주요 논리는 다음과 같습니다.
1. 현재 장면 instantiate 선 그리기를 위한 전체 화면 크기의 프리캐스트 객체
2. 노드에서 touchmove 를 수신하고 이동할 때마다 그 위에 있는 cc.Graphics 구성 요소에 대해 lineTo 의 밑줄 긋기를 수행하고 각 이동점을 저장합니다
3. 수집된 모든 이동 지점을 사용하여 하나의 알고리즘에 따라 노드의 물리적 충돌 영역을 구성합니다
따라서 이동 지점이 적을수록 좋습니다. 이렇게 하면 최적화를 위한 두 가지 수단이 있습니다.
종이비행기 홈페이지에서 다운로드한 사이트는 몇 개입니까
1. 현재 이동점과 이전 이동점의 직선 거리가 한 제한보다 작으면 현재 이동점은 유효하지 않은 것으로 간주됩니다. (점을 강제로 이동하는 거리와 동일)
해당 판단 코드는 Cocos Creator 에서 제공하는 벡터를 사용하여 거리를 구하는 간단한 방법입니다.
Returnlastpoint.sub (nowpoint). mag () > = 5;
2. "현재 이동점은 이전 이동점의 이동 방향과 일치합니다." "이전 이동점이 이전 이동점의 이동 방향과 같다면 이전 이동점은 기록 없이 삭제될 수 있습니다. (직선 부분의 이동점을 양끝으로 누르는 것과 같습니다.)
Touchmove 콜백의 해당 코드는 다음과 같습니다.
//성장 벡터 얻기
Varaddve = thispos.sub (thispos.prevpos)
//이전 성장 변수가 있는 경우
If(thisPos.prevPos.prevPos){
//이전 점의 추가 벡터를 가져옵니다
Varlastaddve = thispos.prevpos.sub (thispos.prevpos.prevpos)
//두 성장 벡터가 같으면 이번 점이 이전 점을 대체합니다
If (math.abs (addve.signangle (cc.v2 (1,0))-lastaddve.signangle (cc.v2 (1,
This.points [this.points.length-1] = thispos
This.physicslinepoints [this.physicslinepoints.length-1] = thispos
}else{
This.points.push(thisPos);
This.physicslinepoints.push (thispos);
}
}else{
This.points.push(thisPos);
This.physicslinepoints.push (thispos);
}
위의 세 가지 방법으로 drawcall 을 약 50 으로 조절할 수 있지만, 효과는 여전히 최적화될 수 있다.
Cocos Creator 는 성능 최적화를 위해 "노드 풀" 과 "동적 합도" 를 최적화하는 방법도 제공합니다. 이 게임은 아직 적용되지 않았으므로 앞으로 시도해 볼 수 있을 것입니다.
마지막으로
마지막으로, 나는 마침내 말하고 싶은 것을 끝내고 마침내 감개했다.
화숙이가 뭐래도 인터넷에 종사한 지 10 년이 다 되어가는데, 지금은 평소의 일에도 단순한 집행이 필요하지 않습니다. 옆에서 지도해 보면 끝이라고 할 수 있습니다. (데이비드 아셀, Northern Exposure (미국 TV 드라마), 예술명언 그래서 누군가가 묻습니다. "왜 아직도 지칠 줄 모르고 그림을 그리고, 코드를 쓰고, demo 를 만드세요? 더 필요하세요?
나는 그에게 한 가지를 말했다. 어느 날, 나는 다른 동료의 프로젝트를 지도했고, 진진은 이치에 맞는 근거가 있었지만, 동료는 나에게 물었다. 너는 얼마나 오랫동안 코드를 쓰지 않았니? 이 안에는 xxxxx 가 있습니다.
나는 순식간에 얼떨해졌다.
그래도 대답했지만, 그때 나는 생각했다. 다행히도 그의 이 프로젝트는 내가 이전에 연구한 적이 있다. 그렇지 않으면 "네가 코드를 쓰지 않은 지 얼마나 되었는가?" 라는 문장으로 나는 직접 주도권을 보냈다.
기업의 이익은 대부분 정보 비대칭에 기반을 두고 있으며, 누가 정보의 상류라면 국면을 통제할 가능성이 더 높다. 관리자, 기획자가 방향을 주는 것도 중요하지만 정보 비대칭은 대부분 기술층에 있다.
나는 CP 가 어떻게 기술을 이용하여 수요자, 특히 첨단 기술 차원의 일을 유유히 하는 것을 본 적이 있다.
때때로 우리는 전환, 채널 전환, 기술 전환 관리를 통해 더 좋고 적합한 방향을 찾았다고 생각합니다.
사실, 나는 더 많은 가능성을 보았다: 1. 전공이 병목에 이르렀고, 병목 현상을 피하기 위해 변형을 선택했을 뿐이다. 2. 전문성은 관리권을 두드러지게 부여받은 후 변화할 것이라고 생각했다오피스타 공식 사이트 입구. 3. 정말 본 전공에 적합하지 않아요
세 번째 요점은 말하지 않고, 처음 두 점, 당신이 전향하고자 하는 분야에 대해 생각해 본 적이 있습니까, 당신이 부족합니까? 네가 고심하고 경영하는 기술은 때때로 단련하면 잊혀진다. 작은 병목 현상 때문에 포기하길 바라니? (윌리엄 셰익스피어, 햄릿, 노력명언)
기술과 관리본은 충돌하지 않지만, 왜 관리로 인해 기술을 버리고 기술 창의력에 대한 추구를 잃게 되는가.
자신이 누구인지 잘 정의할 수 있을까요?
마지막으로, 선배의 말을 인용한다. "저는 제가 먼저 어떻게 실현해야 하는지 알아내고 지도하는 것에 익숙합니다."
누가 정보의 상류가 되고 싶지 않겠는가.
너는 내가 평소에 여러 개의 내부 게임의 연구 개발을 지도하는 것은 물을 불어 주는 것이라고 생각했구나. (윌리엄 셰익스피어, 햄릿, 지혜명언) ….
화숙, 텐센트의 UI 엔지니어이자 게임 개발 마니아입니다. 개발자들이’ 원문 읽기’ 를 클릭하여 저자와 직접 소통하는 것을 환영합니다. 그의 위챗 공중번호: MinProgram, 작은 프로그램, 큰 생각!
더
많다
정자
채색
