[Cocos Creator] 캡쳐

캡쳐

보통 우리가하는 온라인 게임들은 자기의 캐릭터나 사냥 모습을 커뮤니티에 올리거나 간직하기 위해서 흔히들 말하는 스샷을 찍는다. 하지만 웹게임을 만들때는 어떻게 스샷을 찍을수 있을까? cocos2d 에서 제공하는 스크린샷 기능은 아쉽지만 html5에서는 제공되지 않는다. 그래도 아주좋은 라이브러리가 있기에 우리는 그것을 사용하여 cocos2d 와 접목시켜 화면을 캡쳐해 볼 것이다.

Html2Canvas 설치

먼저 html2canvas 홈페이지에 들어간다.

https://html2canvas.hertzen.com/

들어가면 아래와 같이 창이 뜰것이다. 그럼 중간하단에 있는 html2canvas.min.js 버튼을 클릭하자.

클릭하면 긴 자바스크립트 코드가 있다. 이걸 복사해서 html2canvas.min.js 라는 이름으로 저장하면 완성이다.

Cocos Creator 에서 Html2Canvas 사용

라이브러리를 설치했으니 이제 사용법을 한번 알아보자. Creator 프로젝트를 하나 생성하자. 그리고 이전에 만들었던 html2canvas.min.js 파일을 Script 폴더에 저장하자.

html2canvas 파일을 테스트할때 사용할려면 자동 import가 되어있어야한다. html2canvas 파일을 한번 클릭하여 오른쪽 상단에 import가 체그되어있는지 확인하자.

이제 스크립트를 작성할 시간이 왔다. 기존에 만들어져있는 HelloWorld 파일을 열어서 html2canvas 코드를 사용하자. 이전에 잊은게 있는데 html2canvas 홈페이지에 들어가면 홈페이지에 javaScript 코드가 있다. 그걸 복사를 하고 HelloWorld 파일에 붙여넣자.

cc.Class({

extends: cc.Component,

properties: {

label: {

default: null,

type: cc.Label

},

// defaults, set visually when attaching this script to the Canvas

text: 'Hello, World!'

},

// use this for initialization

onLoad: function () {

this.label.string = this.text;

},

render: function () {

html2canvas(document.querySelector("#gameCanvas")).then(canvas => {

document.body.appendChild(canvas);

});

},

// called every frame

update: function (dt) {

},

});

이제 우리는 3초 후에 화면이 캡쳐가 되어 화면에 뿌려주는 기능을 만들것이다. 3초후에 render 메서드가 실행되는 스케줄을 만들자.

onLoad: function () {

this.label.string = this.text;

this.scheduleOnce(this.render, 3);

},

아래의 코드는 3초후에 render 메서드가 실행되는 코드다.

다음 render 메서드의 코드를 채워넣자.

render: function () {

// 모든 cocos creator 의 화면은 id 가 gameCanvas인 태그에 있다

html2canvas(document.querySelector("#gameCanvas")).then(canvas => {

// 이미지 태그 생성

var img = new Image();

// 이미지 소스에 base64로 인코딩 되어있는 gameCanvas Url 을 넣는다.

img.src = canvas.toDataURL('image/png');

// 이미지 로드

img.onload = () => {

// 여기서 부터 cocos creator 라이브러리

// Texture2D 를 생성한다.

var texture = new cc.Texture2D();

// Texture2D 엘리먼트 값에 img 데이터를 넣는다.

texture.initWithElement(img);

texture.handleLoadedTexture();

texture.width = 300;

texture.height = 200;

// SpriteFrame 을 생성하여 Texture2D 객체를 넣어준다.

var newframe = new cc.SpriteFrame(texture);

// 현재 스프라이트에 새로운 spriteFrame 을 넣어준다.

this.sprite.spriteFrame = newframe;

};

});

},

먼저 document.querySelector 에 canvas 태그의 id 를 넣어준다. 모든 cocos creator 에 있는 화면은 canvas 태그에 담겨있다.

다음 Image 태그를 생성한다. 해당 태그에 base 64로 인코딩되어있는 GameCanvas Url 을 넣는다.

그다음 이미지에 있는 onload 함수를 채운다. Texture2D 객체를 생성하여 이미지 데이터를 담은 Texture2D 를 다시 SpriteFrame 객체에 담는다. 그걸 화면에 뿌려주기만 하면된다.

화면에 뿌려주기 위해 sprite 프로퍼티를 생성하자. 그리고 creator 에디터에서 cocos node를 빈곳에 넣어주자.

properties: {

label: {

default: null,

type: cc.Label

},

sprite: {

default: null,

type: cc.Sprite

},

// defaults, set visually when attaching this script to the Canvas

text: 'Hello, World!'

},

이제 실행해보면 아래와 같이 화면이 나올것이다. 3초 후에 중간에있는 cocos2d 이미지가 우리가 캡쳐했던 사진으로 변경되는 모습을 볼 수 있을것이다.