HTML5 게임엔진

HTML5 게임엔진 순위를 바탕으로 한 Google 트랜드 검색 결과

Gamemaker
Construct 2
Phaser
Construct 3
Pixi.js

GameMaker

요요 게임즈가 개발한 2D 게임 개발툴, GUI 기반

현재 최신버전은 GameMaker Studio 2

다양한 플랫폼으로 익스포트 가능 (각 플랫폼 별로 라이센스)

GML(GameMaker Language)이라는 전용 언어을 지원 출처: yoyogames.com

Git 지원, 사용방법은 아래 링크 참조 Git Started with Source Control and GameMaker Studio 2 (Part 1) Git Started with Source Control and GameMaker Studio 2 (Part 2)

Site : http://www.yoyogames.com/gamemaker/studio

Cost: varies (Web: $149, Mobile: $199)

Construct

Scirra Ltd가 개발 한 HTML5 기반 2D 게임 개발 툴, GUI 기반

Construct2

출처: www.scirra.com

Site: https://www.scirra.com/construct2

Cost: varies (Personal: $199.99, Business: $499.99)

License 참조 : https://www.construct.net/en/tutorials/construct-1742

Construct3

Site: https://www.construct.net

Cost: varies (Personal: $99 per year, Business: $149 per year)

브라우저에서 접근 가능한 에디터 제공, 클라우드 지원 (Google Drive , Dropbox, Microsoft OneDrive)

Construct2에서 개선된 사항

이벤트에서 Javascript 지원
모바일 앱 빌드
타임라인 애니메이션
새로운 플러인 및 폰트
개선된 에디터, 애니메이션, 이벤트

Phaser

Site : https://phaser.io

Cost: free (MIT)

가장 많이 사용되고 있는 HTML5 게임 프레임워크

Javascript ,Typescript 기반 웹 서버(WAMP, Apache, node.js 등) 필요

WEBGL 및 CANVAS 랜더링
터치, 키보드, 마우스, 게임패드 입력 지원
3가지의 물리엔진 지원
애니메이션, 사운드 지원

기본 예제

<!DOCTYPE html>
<html>
<head>
    <script src="//cdn.jsdelivr.net/npm/phaser@3.0.0/dist/phaser.min.js"></script>
</head>
<body>
    <script>
    var config = {
        type: Phaser.AUTO,
        width: 800,
        height: 600,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 }
            }
        },
        scene: {
            preload: preload,
            create: create
        }
    };
    var game = new Phaser.Game(config);
    // assets 불러오기
    function preload ()
    {
        this.load.setBaseURL('http://labs.phaser.io');
        this.load.image('sky', 'assets/skies/space3.png');
        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'); // x좌표, y좌표, 객체
        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);
    }
    </script>
</body>
</html>