자바스크립트 게임 엔진 스터디 7주차 [Node Class]

2016. 08 31(일) 게임 엔진 스터디 7차

 

4, 5, 6주차 동안에는 각자 간단한 게임을 구현하면서 게임 로직과, 루프에 대한 감을 잡았습니다.

7주차 때부터는 스터디의 본 목적에 따라 게임 엔진(라이브러리)제작에 들어갑니다.

처음부터 시작하기에는 미숙한 점이 많으므로 enchant.js 라는 상용 자바스크립트 게임 라이브러리 분석부터 시작합니다.

http://enchantjs.com/

 

게임 엔진 스터디 7주차 내용은 다음과 같습니다.

    1. Node Class

    2. 숙제

---

1. Node Class

Node 클래스는 게임 씬(캔버스)에서 보여질 수 있는 모든 클래스의 부모입니다.

enchant.js에서 스프라이트, 라벨, 맵등등의 씬에서 보여지는 객체를 생성할 때 쓰는 클래스는 모두 Node객체를 상속합니다.

그러므로 Sprite, Label, Map, Scene등 모두 Node 클래스의 프로퍼티, 메서드등을 사용할 수 있습니다.

 

Node 클래스는 EventTarget 클래스를 상속하며, 싱글톤 클래스인 Matrix의 메서드를 사용합니다.

Node 클래스의 프로퍼티와 메서드에 대한 설명은 코드의 주석으로 대신하겠습니다.

// #Node

(function() {
    'use strict';

    var Node = sunday.Node = sunday.Class({

        extend: sunday.EventTarget,

        /* =========================================================
         Initialize
         ========================================================= */
        init: function() {
            this.super();                        // 부모 클래스 생성자 호출

            this._dirty = false;                 // 새로운 연산을 할지 결정

            this._matrix = [1, 0, 0, 1, 0, 0];   // 변환 행렬 default

            this._x = 0;                         // x좌표
            this._y = 0;                         // y좌표

            this._offsetX = 0;                   // x좌표 이동 변위량
            this._offsetY = 0;                   // y좌표 이동 변위량

            this.age = 0;                        // 매 프레임마다 +=1 되는 값

            this.parentNode = null;              // 부모 노드 참조

            this.scene = null;                   // 씬 참조
        },


        /* =========================================================
         Getter/ Setter
         ========================================================= */

        // x, y 값이 변화하면 _drity 프로퍼티가 true로 바뀐다.
        x: {
            get: function() {
                return this._x;
            },
            set: function(x) {
                if( this._x !== x ) {
                    this._x = x;
                    this._dirty = true;
                }
            }
        },

        y: {
            get: function() {
                return this._y;
            },
            set: function(x) {
                if( this._y !== y ) {
                    this._y = y;
                    this._dirty = true;
                }
            }
        },


        /* =========================================================
         Method
         ========================================================= */
        // 절대 좌표 이동
        moveTo: function(x, y) {
            this.x = x;
            this.y = y;
        },

        // 상대 좌표 이동
        moveBy: function(x, y) {
            this.x += x;
            this.y += y;
        },

        // 노드 삭제
        remove: function(x, y) {
            // 부모 node로부터 삭제
            if( this.parentNode ) {
                this.parentNode.removeChild(this);
            }

            // 자식 node들 삭제
            if( this.childNodes ) {
                var i, childNodes = this.childNodes.slice();
                for( i = childNodes.length -1; i > 0; --i ) {
                    childNodes[i].remove();
                }
            }

            // 이벤트 삭제
            this.clearEventListener();
        },

        // 좌표 갱신
        _updateCoordinate: function() {

            // ... More...

        }
    });

})();

 

---

2. 숙제

• EventTarget.js
• Event.js
• Matrix.js

위의 3개 클래스에 대한 분석을 해오셔야합니다.

Matrix.js는 행렬변환 개념과 Canvas의 transform() 메서드를 알아야 합니다.

 

1) 행렬변환

http://j1w2k3.tistory.com/651

https://en.wikipedia.org/wiki/Transformation_matrix

https://en.wikipedia.org/wiki/Transformation_matrix#/media/File:2D_affine_transformation_matrix.svg

 

1) transform()

http://www.w3schools.com/tags/canvas_transform.asp

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.