html Canvas 게임 강좌 - 3

gfw.js 를 설명한다.

gfw 는 GameFrameWork.js로 game 화면의 초기화(크기, 상태)를 설정한다.

//value window Rate var screenRate; var frame; var screenSize; //First load function function onGameInit(e) { var theCanvas = document.getElementById("GameCanvas"); var canvasSize = new Size(theCanvas.width,theCanvas.height); var windowSize = new Size(window.innerWidth,window.innerHeight); if (!(/android|webos|iphone|ipad|ipod|blackberry|windows phone/i.test(navigator.userAgent))) { //maximum if(windowSize.width>540) screenRate = 1; else { screenRate = windowSize.width/canvasSize.width; //change canvasSize theCanvas.width = windowSize.width; theCanvas.height = canvasSize.height*screenRate; } } else//mobile { var browser = navigator.userAgent.toLowerCase(); var user_browser = (browser.indexOf('crios')!=-1); if ((/ipad/i.test(navigator.userAgent)))//ipad's chrome index 200 windowSize.width -= 200; if ( !user_browser && navigator.userAgent.indexOf("Safari")!= -1 )//mobile safari { //Safari bottomBar Index if ((/iphone/i.test(navigator.userAgent)))//iphone index 40 windowSize.width -= 40; else if ((/ipad/i.test(navigator.userAgent)))//ipad index 170 windowSize.width += 30; } if( windowSize.height/windowSize.width > 1.6)//need shallow width { alert("rescale :"+windowSize.width); windowSize.width -= windowSize.width*(windowSize.height/windowSize.width-1.5); } screenRate = windowSize.width/canvasSize.width; //change canvasSize theCanvas.width = windowSize.width; theCanvas.height = canvasSize.height*screenRate; } screenSize = new Size(theCanvas.width,theCanvas.height); //resource preLoading ResourceDB(); //initial game_state after_loading_state = new Scene_Test(); //valable Frame Game Loop setTimeout(gameLoop,0); } //EventListener window.addEventListener("load", onGameInit, false);

풀 소스를 한번에 올렸다..

위에서 부터 살펴보면

theCanvas 변수에 html 내 새성한 canvas 객체를 얻는다.

그 객체의 w, h 크기와 현재 window의 w, h를 얻는다.

디바이스 마다 다른 브라우저크기를 지원하기 위해

첫번째 PC일 경우와 모바일 경우를 나눈다.

모바일 내부에서도 브라우저 종류에 따라 크기를 나눈다.

이것은 브라우저의 상단 url을 고려한 것이다.

화면 크기를 재조장한 다음

Resource를 등록하고

시작할 씬을 정한다음에 Loop를 시작하면 끝

> window.addEventListener는 화면이 load될 때 onGameInit을 호출하는 이벤트임