[Phaser.js] First meet of Phaser.js

Codecademy라는 사이트에서 학습한 내용을 기반으로 하는 컨텐츠입니다. 저작권에 침해되지 않게 하기 위하여 저의 언어로 재가공하므로 약간의 왜곡이 발생할 수 있다는 점 양해바랍니다.

 

Codecademy에서 mobile development 부분이 있어서 들어가봤는데 swift랑 kotlin위주이고 react naitive는 무료로 양이 적어서 아쉬워하다가 Game development 라는 주제로 학습할 수 있는 부분이 있어서 들어가봤는데, 역시 Unity는 기업에서 이용하려면 돈을 지불해야해서 그런지 없었고, 언리얼은 아마 오픈소스인 것 같은데 수요가 없어서인지(이 사이트에서 배우려는 사람은 없는 것 같다..) 강의가 없고 Javascript 기반으로 하는 Phaser.js만 있어서 이것이 궁금해져서 공부해보려는 찰나 시간은 금인만큼 미리 알아보고 공부를 해야겠어서 많이 쓰이는 것인지 검색을 통해 알아보았다.

 

일단, 구글검색으로 당장 알기 어려워서 Chat GPT사마에게 질문했다.

 Q. is phaser.js common language for creating games nowadays?
A. Phaser.js is a popular and widely used framework for creating 2D browser-based games with JavaScript. It has a large and active community of developers and offers many features and tools for game development, including asset loading, physics, input handling, and more.
While Phaser.js is a common choice for creating games, it is not the only option available. There are many other game development frameworks and engines that developers can choose from, depending on their needs and preferences. Some popular alternatives to Phaser.js include Pixi.js, Unity, Unreal Engine, and Godot Engine.
Ultimately, the choice of game development framework or engine depends on the specific needs and goals of the project, as well as the expertise and experience of the development team.

nowadays란 표현이 좀 ㅋㅋㅋ 단어암기해서 쓰는 중,고등학생 같아서 표현을 조금 바꿔서 다시 질문했다.

Q. is phaser.js trendy language for making game?
A. Phaser.js is a popular game development framework and has been around for many years. While it may not be considered a "trendy" language, it is still widely used and has a large community of developers and users. Many games have been successfully created using Phaser.js, and it continues to receive updates and improvements from its developers.
That being said, there are many other game development tools and frameworks available, and what is considered "trendy" may depend on the current state of the industry and the preferences of developers. Some other popular game development frameworks and engines include Unity, Unreal Engine, Godot Engine, and Construct.
Ultimately, the choice of game development tool or framework should be based on the specific needs of the project and the expertise of the development team. While Phaser.js may be a good choice for some projects, other tools may be more appropriate for others.

'trendy'하지는 않지만 커뮤니티가 거대하고 참고할 소스가 많다.. 뭐 이정도로 해석하면 되겠다.

Unity나 Unreal engine의 점유율이 매우 높고, 나에게는 생소하지만 Godot Engine이나 Construct도 많이 사용하나보다. AI라 그런지 유니티나 언리얼 엔진 아니면 쓰지마라~~ 뭐 이런 극단적인 용어는 잘 사용하지 않고 객관적(?)으로 설명해준 것 같다. Javascript를 마스터하고 싶은 나에게는 게임도 Javscript로 만들고 싶은 욕구가 있었는데, 그런 욕구를 해소시켜주면서 자바스크립트 실력까지 늘린다?? 너무 구미가 당기는 일이어서 일단 Codecademy에 나온 커리큘럼을 블로그에 기록하면서 하나하나 클리어하고 내가 원하는 정도의 게임이 나올 수 있는지(뭐 엄청 대단한게 필요하지는 않을 것 같다) 봐야겠다. 단, 3D게임을 만들려면 확실히 Unity나 Unreal 쪽으로 가는 것이 좋을 것 같다는 것이 현재의 생각이다.

 

Phaser.js의 공식 튜토리얼도 있으니.. 꼭 Codecademy를 따라갈 필요는 없으니 맘에 안들면 갈아타겠다..(돈을 질러놓았다고 노예가 되지는 않을거다..!!)

 

그리고 Phaser.js 외에도 Javascript 기반의 게임 엔진이 꽤 있나보다..(어떻게 보면 당연하다 웹 게임이 얼마나 많고 자바스크립트로 웹게임을 만들게되면 HTML5기반으로 만드는건데 이점이 정말 많을 것이다. 특히 간단한 게임을 만드는데 유니티 엔진을 사용하고 C#이나 C++을 사용하면 해당언어에서 작동되는 것을 HTML5에서 작동되게 할려면 호환성문제도 있고 골치가 아플 것이다. 컴파일링도 해야하고 문제가 생기면 원인을 알기도 어려울 수 있다. 그냥 HTML5 기반으로 만들면 엄청 많은 문제가 해결될 것이다.)만은 다음에 알아보자라고 하고 싶었는데 그러면 안된다. 검색 한 번 하는게 뭐 얼마나 어렵다고~ㅋㅋㅋㅋ 이번에도 Chat GPT의 힘을 살짝 빌려보았다.(이 정도면 게임엔진 공부하는 내용이 아니라 Chat GPT로 배경지식 쌓기 포스팅이 아닌가..?)

 

Q. let me know famous javascript engine for making game
A. There are several popular JavaScript game engines available that can be used for creating games. Here are a few examples:
Phaser.js: Phaser.js is a widely used open-source game framework for creating 2D browser-based games with JavaScript.
Pixi.js: Pixi.js is another popular open-source 2D game framework that uses WebGL for rendering.
Three.js: Three.js is a powerful 3D graphics engine that can be used for creating 3D games and other interactive experiences in the browser.
Babylon.js: Babylon.js is another popular 3D game engine that can be used for creating high-quality 3D games and experiences in the browser.PlayCanvas: PlayCanvas is a cloud-hosted game development platform that uses WebGL and offers a visual editor for creating games.
Cocos2d-x: Cocos2d-x is a popular open-source game engine that can be used for creating both 2D and 3D games for various platforms, including mobile devices.

These are just a few examples of the many game engines and frameworks available for JavaScript game development. The choice of engine or framework depends on the specific needs and goals of the project, as well as the expertise of the development team.

아까 3D 게임은 유니티 언리얼로 무조건 해야한다는거 취소다..!! 생각해보니 ㅋㅋㅋ Three.js가 있었다. 이 엔진 관련해서 패스트캠퍼스에서 강의도 구매하려 했었는데 왜 잊었을까 ㅋㅋㅋ Javascript로 다 끝내버리려면 Three.js도 좋은 엔진이 될 것 같다. 그리고 바빌론이나 코코스 투디엑스? 라는 엔진도 있다하니 Phaser.js를 맛 좀 보고 자바스크립트 게임 엔진의 판도라의 상자를 열어보면 진짜 재미있을 것 같다.

정말 다양한 엔진이 있고, 어차피 기반은 Javascript니까 일단은 오픈소스가 많고 배우기 쉬운 엔진부터 손대는 것이 타당한 접근이라고 생각이 된다.

 

결론은 지금 상황에서 접근성이 좋은 Phaser.js로 2D부터 시작해보겠다. 3D는 어차피 블랜더 무료강의라도 완강하고나서 듣든지해야 시너지가 나기때문에(시간이 꽤 많이 들 것 같기에 일단은 게임을 만든다는 1차적인 목표 달성이 먼저다) 조금 미뤄두고 2D로 만들면서 기술적 향상부터 해보도록 하겠다.

 

Phaser.js 자체에 대한 소개는 거의 없고 javascript 기반 게임엔진이 무엇인지 왜 Phaser.js를 공부하려고 하는지에 너무 많은 지면을 할애한 것 같다. 간단하게라도 Phaser.js를 소개하고 마칠까 한다. (이제 막 공부하는 입장에서 소개라기보다는 나도 처음 들어가보는 입장으로서 초면에 어떤지 감상정도가 아닐까 싶다.)

 

역시 공홈에서 알아보는게 제일 낫지 않겠는가..

설명은 됐고 Example부터 봐야지 싶어서 들어와봤다. 카메라 부분을 들어가서 살펴보니 카메라워크(Camera-Work)에 따라 다양하게 작동하는 카메라를 만들 수 있는 코드들이 나열되어 있었는데, 그 중에 Camera Center On이라는 예시코드를 들어가보니,

class Example extends Phaser.Scene
{
    constructor ()
    {
        super();
    }

    preload ()
    {
        this.load.image('map', 'assets/tests/camera/earthbound-scarab.png');
    }

    create ()
    {
        this.cameras.main.setBounds(0, 0, 1024, 2048);

        this.add.image(0, 0, 'map').setOrigin(0);

        this.cameras.main.setZoom(4);
        this.cameras.main.centerOn(0, 0);

        const text = this.add.text(304, 230).setText('Click to move').setScrollFactor(0);
        text.setShadow(1, 1, '#000000', 2);

        let pos = 0;

        this.input.on('pointerdown', function () {

            const cam = this.cameras.main;

            if (pos === 0)
            {
                cam.centerOn(767, 1096);
                pos++;
            }
            else if (pos === 1)
            {
                cam.centerOn(703, 1621);
                pos++;
            }
            else if (pos === 2)
            {
                cam.centerOn(256, 623);
                pos++;
            }
            else if (pos === 3)
            {
                cam.centerOn(166, 304);
                pos++;
            }
            else if (pos === 4)
            {
                cam.centerOn(624, 158);
                pos++;
            }
            else if (pos === 5)
            {
                cam.centerOn(680, 330);
                pos++;
            }
            else if (pos === 6)
            {
                cam.centerOn(748, 488);
                pos++;
            }
            else if (pos === 7)
            {
                cam.centerOn(1003, 1719);
                pos = 0;
            }

            text.setText(['Click to move', 'x: ' + cam.scrollX, 'y: ' + cam.scrollY ]);

        }, this);
    }
}

const config = {
    type: Phaser.AUTO,
    parent: 'phaser-example',
    width: 800,
    height: 600,
    pixelArt: true,
    physics: {
        default: 'arcade',
    },
    scene: [ Example ]
};

const game = new Phaser.Game(config);

일단, this에 대한 이해가 부족한 것을 떠나서 마음을 단단히 먹고 공부해야 될 것 같다는 생각이 든다. ㅋㅋㅋㅋㅋ 게임을 만드는 것은 진짜 웹페이지를 만드는 것과는 다른 영역임이 느껴진다. Typescript나 Library를 사용해서 느껴지는 생소함과는 또 다른 느낌의 생소함이 느껴진다(현재 기준...으로 그렇다. 나중에는 별 거 아니네 하게 될 것 같은 느낌이 든다).

 

그렇지만, 유니티에서 camera 이런 것들이 내장되어있는게 익숙하기 때문에 class도 사용했었고(사실 상 class를 알고 쓴 게 아니라 사용했다고 보기 어렵기는 하다) 친숙함이 한 스푼정도는 있고 또 재미있어 하는 분야이므로 재미나게 공부해볼 수 있을 것 같다. 공식 튜토리얼이든 Codecademy든 빠른 시일 내에 결과물로 다시 찾아오겠다. 

 

음.. 뭔가 나만의 포스팅 끝내는 마무리 인사를 만들고 싶은데 아직은 모르겠다. See you~!!