블로그 이미지
개발자로서 현장에서 일하면서 새로 접하는 기술들이나 알게된 정보 등을 정리하기 위한 블로그입니다. 운 좋게 미국에서 큰 회사들의 프로젝트에서 컬설턴트로 일하고 있어서 새로운 기술들을 접할 기회가 많이 있습니다. 미국의 IT 프로젝트에서 사용되는 툴들에 대해 많은 분들과 정보를 공유하고 싶습니다.
솔웅

최근에 받은 트랙백

글 보관함

calendar

          1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31            


어제 SGF(Simple Game Framework)를 이용해서 HTML5 로 PingPong Game 을 만들기 시작했습니다.

index.html 과 styles.css 파일을 만들고 js폴더 밑에 SGF 를 넣었습니다.

index.html 에서는 data-screen="screen", data-game="Pong" 이 두가지 태그를 유심히 보실 필요가 있습니다.
data-screen 으로는 div id 가 screen인 것을 사용한다는 의미입니다.
이 부분이 없으면 해당 html 의 body 부분을 screen으로 사용할 겁니다.
그리고 data-game 을 Pong으로 한 것은 Pong이라는 폴더 밑에 있는 game관련 소스를 참고할 것이라는 의미입니다.
앞으로 만들 PingPong 게임의 objects 와 behavior 관련 소스코드들은 바로 이 폴더 밑에 위치할 겁니다.

일단 SGF로 게임을 만드려면 main.js 를 만들어야 합니다.
아래 코드를 Pong 폴더 안에 main.js 파일로 저장해 주세요.

// Import required classes
var Game = SGF.require("Game");
var Input = SGF.require("Input");
var Rectangle = SGF.require("Rectangle");
var Label = SGF.require("Label");
// Get a reference to our Game instance
var myGame = Game.getInstance();
// Get a reference to our game's Input instance
var myInput = myGame.input;
var game_height = 400;
var game_width = 400;
myGame.getScript("Paddle.js", function(){
// left paddle
myGame.leftPaddle = new Paddle();
myGame.leftPaddle.setPosition(0, 150);
myGame.addComponent(myGame.leftPaddle);
});

main.js에서는 처음에 Game 을 require 합니다.
그리고 Input,Rectangle,Lable 변수에 SGF의 해당 메소드들을 대입했습니다.
다음 myGame 변수에는 Game의 getInstance() 메소드를 대입했습니다.


SGF의 API를 보면 위와 같이 getInstance 에 대한 설명을 보실 수 있습니다.
항상 main.js의 첫번째 파트에 이 getInstance메소드가 오게 된다고 나와 있네요.

그리고 이 인스턴스에 input을 사용하기 위해 myInput 이라는 변수에 담습니다.
다음줄엔 game_height와 game_width 변수에 400을 대입합니다.

그리고 myGame 인스턴스에 getScript 메소드를 이용해서 Paddle.js를 사용해서 Paddle을 화면에 그려 넣습니다.
여기선 일단 leftPaddle 을 만들고 그 위치를 정하고 컴포넌트에 add를 했습니다.

아직 Paddle.js를 만들지는 않았습니다. main.js 까지 완성하면 아래 화면을 보실 수 있습니다.

어제 만들었던 하얀 바탕이 까맣게 변했죠?
Paddle을 만들었지만 아직 Paddle.js를 완성하지 않았기 때문에 화면에는 나타나지 않습니다.

아래 소스는 paddle.js 입니다.
// Paddle.js
var Paddle = Class.create(Rectangle, {
initialize: function($super){
$super();
this.height = 100;
this.width = 20;
this.color = "0011FF";
this.isPlayerOne = true;
},
setPosition: function(x, y){
this.x = x;
this.y = y;
},
getPosition: function(){
return {
'x': this.x,
'y': this.y
}
},
setIsPlayerOne: function(bool){
this.isPlayerOne = bool;
},
checkInput: function(){
if (this.isPlayerOne == false) {
if (myInput.isKeyDown(Input.KEY_UP)) {
if (this.y > 0) {
this.y = this.y - 10;
}
}
else
if (myInput.isKeyDown(Input.KEY_DOWN)) {
// x,y are taken from the left corner
if (this.y < game_height - this.height)
this.y = this.y + 10;
}
}
else {
if (myInput.isKeyDown(65)) { // 'A'
if (this.y > 0) {
this.y = this.y - 10;
}
}
else
if (myInput.isKeyDown(90)) { // 'Z'
// x,y are taken from the left corner
if (this.y < game_height - this.height)
this.y = this.y + 10;
}
}
},
update: function(){
this.checkInput();
}
});

처음 Paddle을 생성합니다. Rectangle 을 이용해서 생성했는데요. height는 100 width 는 20이고 color 는 0011FF 로 파란색 입ㅂ니다.
그리고 이 Paddle의 isPlayerOne 은 true 입니다.

setPosition,getPosition,setIsPlayerOne  함수들은 나중에 보겠습니다.

우선 checkInput 함수를 보겠습니다.

맨 처음 isPlayerOne을 체크합니다. 이 탁구게임은 2인용이기 때문에 왼쪽 Player 인지 오른쪽 Player 인지를 알아야 합니다.
우선 leftPaddle 에 inPlayerOne 을 true로 했다는 것을 기억하세요.

맨 처음 if 문은 isPlayerOne 이 false 인 경우에 실행하는 것이니까 오른쪽 paddle에 해당 되는 겁니다. 아직 이 오른쪽 패들은 만들지 않았으니까요 저 아래 else를 보겠습니다.
else 부분 (왼쪽 paddle)에서는 key 번호 65번이 눌려졌는지를 체크합니다.
이 65번은 키보드의 A 버튼을 말합니다.
이 키가 눌려졌으면 y 좌표가 10씩 줄어듭니다.
그리고 90(Z) 가 눌려졌으면 y 좌표가 10씩 늘어납니다.

이제 index.html을 refresh 하시면 위와 같은 화면을 보실 수 있습니다.
a,z 키를 눌러 보세요. 이 패들이 아래 위로 움직일 겁니다.

그럼 이제 right paddle 도 넣어 볼까요?

아래 코드를 left paddle 아래에 추가하세요.
 myGame.rightPaddle = new Paddle();
  myGame.rightPaddle.setPosition(game_width - myGame.rightPaddle.width, 150);
  myGame.rightPaddle.setIsPlayerOne(false);
  myGame.addComponent(myGame.rightPaddle);

leftPaddle이랑 다른 부분은 setIsPlayerOne을 false로 한 것입니다.
left가 아니라 right란 것을 알리기 위해서죠.


오른쪽 paddle은 키보드의 위 아래 화살표를 누르면 위 아래로 움직이게 됩니다.
이 내용은 Paddle.js 에서 보셨죠?

이제 두개의 패들을 다 만들었고 유저가 이 객체들을 움직일 수 있도록 했습니다.

지금까지 한 소스는 아래 압축파일에 있습니다.


다음시간에는 이어서 공을 만들고 Score를 만들어 보겠습니다.

꾹~~~ 추천 추천 부탁 드려요 ~~~~~ ~~~~~~~~
저작자 표시 비영리 동일 조건 변경 허락
신고


드디어 HTML5로 게임 만들기를 시작하려고 합니다.
그동안 사전 정지작업의 일환으로 HTML5,CSS3,Javascript 와 관련해서 살펴봤습니다.
HTML5로 게임만들기를 거쳐서 HTML5 모바일 게임을 만드는게 제 개인적인 목표입니다.

개인적으로 2년여 전 부터 모바일 앱 프로그래밍을 시작했고 작년 중순부터 Corona SDK로 크로스 플랫폼 모바일 애플리케이션을 개발하고 있습니다.

Corona SDK 이외에 HTML5 를 통한 앱 개발도 장차 크로스플랫폼 모바일 프로그래밍으로 아주 전망이 있을 것 같아 이 공부를 시작했습니다.

HTML5로 게임만들기 이외에 센차 터치나 phone Gap (폰갭)을 통한 웹 앱 개발도 제 주요 관심 분야 중 하나 입니다.
조만간 이 공부도 본격적으로 하게 되면 posting 하도록 하겠습니다.

이제 HTML5로 게임만들기를 시작해 보죠.

처음 시작할 게임은 탁구(Ping Pong)게임 입니다.

완성된 화면은 아래와 같을겁니다.


사각형 게임 화면에 빨간 정사각형(공) 이 있고 두개의 파란 Paddle 이 있습니다.
그리고 상단에는 게임 제목과 점수가 표시 됩니다.
공은 벽에 튀면서 움직이고 이 두개의 paddle로 공을 막아내는 게임입니다.

이 게임은 프레임워크로 SGF(Simple Game Framework)를 사용할 겁니다.
이 프레임워크에 대한 설명은 http://sgfjs.org/ 에 가시면 보실 수 있습니다.

이 프레임워크의 소스와 API 는 https://github.com/TooTallNate/Simple-Game-Framework 에 가시면 다운 받으실 수 있습니다.
다운받으신 후 압축을 푸시고 doc폴더의 index.html 을 실행하시면 아래와 같은 API화면을 보실 수 있습니다.


이 SGF 에 대해서는 따로 다루지는 않겠습니다. 탁구게임을 진행하면서 그때그때 필요함 부분을 설명하겠습니다.
궁금하신분은 이 API를 참조하세요.

우선 오늘은 html 파일과 css 파일을 만들어 보겠습니다.

아래와 같이 index.html을 만들어 보세요.
<!DOCTYPE HTML>
<html>
    <head>
        <title>Pong</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <!-- For IE. Force the browser to the most current rendering mode. -->
        <meta http-equiv="X-UA-Compatible" content="IE=edge" >

        <!-- A few basic styles. These are NOT mandatory for SGF... -->
        <link href="styles.css" type="text/css" rel="stylesheet" />
       
        <script type="text/javascript" src="js/SGF.js"
            data-debug="true"
            data-prototype="lib/prototype.js"
            data-swfobject="lib/swfobject.js"
            data-screen="screen"
            data-game="Pong"></script>
    </head>
    <body>
      <div id="screen"></div>
    </body>
</html>

위 소스를 보시면 처음 <!DOCTYPE HTML> 는 HTML5를 사용하겠다는 의미입니다.
브라우저에게 HTML5를 사용하겠다고 알려주는 것이죠.
그리고 밑으로 내려와서 <link href 태그는 외부 css를 사용하겠다는 겁니다.
그리고 script 태그를 보면 js/SGF.js 를 불러왔습니다.

이 JavaScript는 SGF 프레임워크를 사용할 수 있도록 서비스를 제공해 줍니다.
이 게임에서 사용될 SGF 소스(js 폴더 밑에 있는 있어야 함)는 아래 파일을 다운 받으세요.


이 압축파일을 index.html이 있는 폴더에 압축을 푸시면 됩니다.

이제 css 파일을 만들어 보겠습니다.
이 css 파일 이름은 styles.css가 되야 하겠죠? index.html 에서 그 파일에 링크를 걸었으니까요.

body {
    margin:0 0 0 0;
    width:100%;
    height:100%;
    text-align:center;
}

#screen {
    width:400px;
    height:400px;
    border:Solid 1px #000000;
    margin:0 auto;
}

내용은 별다른게 없습니다. screen 크기가 400X400 픽셀 크기로 지정한게 답니다.

이 index.html 을 브라우저에서 실행하면 아래와 같은 화면을 보실 수 있습니다.

그냥 검은 테두리가 있는 흰 바탕화면 뿐입니다.
저 검은 테두리는 css에서 border:Solid 1px #000000; 를 선언했기 때문에 나타난 겁니다.

자 오늘은 여기까지 하구요.

내일부터 여기에 paddle, ball, score 같은 objects 들을 배치하고 이 objects 들을 control 해 보겠습니다.

추천 추천... 꾹 ~~ 눌러 주세요. ~~~~~
저작자 표시 비영리 동일 조건 변경 허락
신고
이전 1 다음