부자되고 싶은 아빠.

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

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

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

phaser3 엔진

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

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

phaser3 튜토리얼 링크

위 내용은 보통 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>​

첫번째는 제일 싸게 구입하는 방법은 다들 아시겠지만 컬쳐랜드 문화상품권을 교환해서 구입하는게 제일 쌉니다.

두번째는 머니트리란 앱에서 모바일쿠폰들을 파는데 머니트리앱을 설치하고

자신이 가지고 있는 모바일 상품권을 팔고 나서 그돈으로 카카오페이지 캐시쿠폰을 구하는 방법입니다.

아래와 같이 사고팔기탭에 가서 카카오로 검색하시면 다른분들이 파는 카카오페이지 캐시쿠폰이 있습니다.

내가 팔수도 있고 내가 살수도 있고 자신이 가지고 있는 안쓰는 모바일쿠폰(스타벅스커피나 던킨도넛등등)을 팔고

나온돈으로 아래와 자신이 필요한 카카오페이지 캐시쿠폰을 구해서 충전해서 사용할수 있습니다.

주의할점은 자신의 물건을 팔때 팔 금액만큼의 보증금이 필요해서 초반에는 돈이 좀 필요합니다.

예로

스타벅스 모바일 쿠폰을 팔때 4200원짜리 쿠폰을 3600원정도 판다고 가정하면

3600원의 보증금이 필요합니다.(시세확인후 금액을 설정해서 파시면 될거 같습니다.)

보증금은 모바일쿠폰이 팔리고 상대방이 수락하고 나면

판매금액과 함께 돈이 같이 들어옵니다.

머니트리 추천인코드 : SMEM8183

세번째는 캐시슬라이드를 설치하여 캐시를 모아서 문화생활 상점에서 구하는 방법입니다.

캐시슬라이드 잠금화면에서 캐시를 모을수 있고 만보기를 통해서도 캐시를 얻을수 있습니다. 만보기 설정은

3000~10000걸음까지 차등주는게 아니라서 3000걸음으로 설정하시고 캐시를 5~7캐시정도 받을수 있습니다.

그외에 가끔 퀴즈도 나와서 퀴즈풀면 30캐시씩 적립이 됩니다.

더빨리 모을려면 캐시슬라이드에서 나온 캐시피드를 설치하면 더 많은 캐시를 적립하실수 있습니다. 같은 회사꺼라 캐시는 한곳으로 모입니다.

캐시피드는 글을 보면 1원씩 적립해주는앱으로 1시간마다 초기화 되서 계속 글을 읽어주면 캐시가 모입니다.

근데 하다보면 좀 힘들긴합니다.

캐시슬라이드에서 모은 캐시는 카카오페이지 캐시쿠폰으로 교환시 1:1로 교환이 되기때문에 효율이 제일 좋습니다.

다른제품들은 1:1.5정도의 비용을 더 지불해야 교환이 되서 효율이 안좋습니다.

캐시슬라이드 추천인코드 : k3o0v

머니트리

캐시슬라이드