HTML5 게임 만들기 - 티스토리 내부 게시판에 코딩하기.

 

안녕하세요. 넌소중햇입니다.

이런저런 이상한 글들 올리다가 이번에는 실제 게임코딩에 관련된것을 올려볼까 합니다.

html5게임을 만들수 있는 엔진 phaser3를 저도 공부하면서 게시물을 올려보기 위해서 이렇게 시작하게 됩니다.

 

phaser3 엔진

Phaser - A fast, fun and free open source HTML5 game framework

위 사이트에 가면 Phaser3 엔진에 관련된 여러 샘플을 볼수 있습니다.

 

그중에 게임을 띄우기 위한 기초 Hello World!를 티스토리 게시판에 띄어보도록 하겠습니다.

phaser3 튜토리얼 링크

Phaser - A fast, fun and free open source HTML5 game framework

 

위 내용은 보통 index.html에 들어가는 내용이고 제 내용은

게시판에 바로 코딩하는걸로 교체를 해서 코드를 올려봅니다.

아래코드를 게시판의 기본모드말고 HTML모드로 변경하신다음에 아래 소스를 복사해서 넣으시면 됩니다.

현재 모바일에서는 제대로 작동하지 않는 문제를 확인했습니다.

이부분은 저도 공부하면서 바꿔보도록 하겠습니다.

// phaser3 엔진을 사용하기 위한 라이브러리를 추가합니다. phaser-arcade-physics.min.js 이파일은 물리가 들어간 라이브러리라 예제처럼 통통 튀게 되는겁니다.
<script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>
// 이부분이 사이트에 있는 헬로우월드부분입니다.
<script>
  var config = {
    type: Phaser.AUTO,
    width: 800,			// 게임 canvas 가로 사이즈를 설정합니다.
    height: 600,		// 게임 canvas 세로 사이즈를 설정합니다. 
    physics: {			// 물리 속성을 주기위한 옵션입니다.(저도 공부하는 중이라)
      default: 'arcade',
      arcade: {
        gravity: { y: 200 }
      }
    },
    scene: {			// 이부분은 scene추가를 하는것인데
      preload: preload,	// preload함수를 선언하고 보통 리소스를 로드할때 사용하게 됩니다.
      create: create,	// create함수를 선언하고 화면셋팅을 할때 사용합니다.
      //update:update,	// 이부분은 예제소스에 없는 부분이고 이부분을 선언하고 update함수를 만들게 되면 계속 호출되게 되어서 게임에서 먼가를 처리할때 작업을 할수 있습니다.
      // update부분은 나중에 다루도록 하겠습니다.
    }
  };

  var game = new Phaser.Game(config);
  function preload (){
    this.load.setBaseURL('https://labs.phaser.io');		// 샘플에는 http로 설정되어 있어서 이미지가 로딩되지 않아 https로 변경하니 이미지가 잘 로딩되네요.

    this.load.image('sky', 'assets/skies/space3.png');	// sky란 키로 이미지를 로딩하게 됩니다.
    this.load.image('logo', 'assets/sprites/phaser3-logo.png');
    this.load.image('red', 'assets/particles/red.png');
  }

  function create (){
    this.add.image(400, 300, 'sky');			// 로딩한 sky란 이미지를 게임화면에 추가합니다. 이부분을 해주어야 실제 화면에 나옵니다.
    var particles = this.add.particles('red');	// 파티클을 생성합니다.
    var emitter = particles.createEmitter({
      speed: 100,
      scale: { start: 1, end: 0 },
      blendMode: 'ADD'
    });

    var logo = this.physics.add.image(400, 100, 'logo');	

    logo.setVelocity(100, 200);
    logo.setBounce(1, 1);
    logo.setCollideWorldBounds(true);

    emitter.startFollow(logo);
    
    // 이부분은 제가 추가한것인데 이코드가 없는 상태로 하면 게임화면이 게시판의 맨아래쪽으로 내려가게 되므로 게임canvas를 게시판의 정상적인 위치로 오게
    // 스킨이 Book Club 일경우 <div class="post-cover"></div> 아래쪽에 위치하게 해줍니다.
    $(".post-cover").after(game.canvas);
    // 스킨이 #1 일경우 아래와 같이 해줘야 합니다.
    // $(".area_title").after(game.canvas);
  }  
</script>
<script>
  setTimeout(function(){
    // Phaser3 엔진에서 자체적으로 scroll부분을 hidden으로 변경을 하기 때문에 게시판의 스크롤이 되지 않아 스크롤이 될수 있게 0.5초후에 스크롤로 변경해주는 코드입니다.
    document.body.style.overflow = 'scroll';
  }, 500);
</script>​