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

최근에 받은 트랙백

글 보관함


어제 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를 만들어 보겠습니다.

꾹~~~ 추천 추천 부탁 드려요 ~~~~~ ~~~~~~~~
반응형

Comment

  1. pingpongplayer 2012.07.22 10:37

    pingpong만들기 더이상 포스팅 안하시나요? 아쉽네요..ㅜㅜ

    혹시 완성된 소스라도 얻을 수 있을지..

    • 솔웅 2012.07.24 04:21 신고

      안녕하세요.
      직장을 옮긴 후로 새로운 주제로 포스팅을 하다 보니까 예전에 포스팅 하던 것 들 중 끊긴 것들이 있습니다.
      죄송합니다.
      pingpong 관련해서는 조만간 완료 시켜야 겠네요.
      예전 소스가 저한테 있을런지 모르겠습니다.
      찾아보고 마저 완료할께요.

      감사합니다.

    • 임은천 2012.07.27 11:19

      이 소스코드는 공개된 소스 코드입니다. 책 제목은 Learning HTML5 Game Programming 입니다. James L. Williams 라는 저자로 검색하시면 소스 코드 링크를 찾으실 수 있을 겁니다.

    • 솔웅 2012.07.28 06:32 신고

      임은천님 감사합니다.
      저도 잊어버리고 있었던건데...
      그 때 소스코드를 분석하다 다른 일 때문에 중단 됐던 것 같네요.
      필요하신 분들은 공개 소스 받으시면 되구요.
      직접 소스코드를 분석하고 정리하고 이것저것 고치면서 실습을 해 보시면 여러분 프로그래밍 실력이 훨씬 늘거예요.
      그럼 열 코딩 하세요...

      감사합니다.

이전 1 2 다음