우동우동우's note

Quintus : 간단한 회전판 만들기 본문

HTML

Quintus : 간단한 회전판 만들기

우동우동우 2016. 1. 2. 15:52




Quintus 를 활용하여 간단하게 회전하는 판을 만들어 보았다. 구현 방법은 간단하다 회전하는 판을 구현하는 클래스를 정의하고, 불러와 쓰면 된다. 물론 회전하는 판에 대한 정의는 코드로 만들어 줘야한다. 순서대로 살펴 보자. 


예제는 아래의 링크에 있다. 
 Archive.zip


예제를 실행하면 다음과 같이 나타날 것이다. 




이걸 어떻게 구현 했는지 살펴보자. 

1. html에서 라이브러리 js 불러오기

우선 구현을 할 페이지를 만들어 줘야하겠다. 본인의 경우 파일 명을 index.html으로 만들었다. 

다음으로 기본적인 선언을 하고 라이브러리를 불러오도록 하는 것이 좋다. 라이브러리를 다운로드받아서 사용하면 좋겠지만 그냥 cdn에 있는 파일을 사용하겠다면 그냥 cdn 주소를 적어주면 되겠다. 예제는 cdn에 있는 걸 사용하도록 구현하였다. 


index.html 파일에 보면 다음과 같은 부분이 있을 것이다. 


<head>
        ...
    <script src='http://cdn.html5quintus.com/v0.2.0/quintus-all.min.js'></script>
</head>


위 코드는 script 태그를 이용해서 quintus 라이브러리를 불러오는 것이다. 내가 만일 라이브러리를 다운받아서 사용할 것이라면 src 애트리뷰트 내에 상대주소로 내가 다운 받은 라이브러리 위치를 적어주면 된다. 


2. 구현할 js 불러오기

이제 라이브러리를 불러왔다. 이제 우리가 작성할 코드를 쓸 위치를 만들어 줄 차례이다. 그럼 두가지 해줄 일이 있다. 하나는 파일을 만들어 주는 것이고, 다른 하나는 해당 파일을 링크해주는 것이다. 

index.html 파일과 같은 위치에 비어있는 test.js 파일을 만들어 주자. 



그리고 index.html에는 다음과 같이 text.js 파일을 불러오도록 한다. 


<head>
        ...
    <script src='http://cdn.html5quintus.com/v0.2.0/quintus-all.min.js'></script>
    <script src='test.js'></script> 
</head>


이제 본격적으로 코딩을 해보자.


3. 코딩하기

이제 test.js 파일에 코딩을 시작해보자. Quintus 라이브러리는 load 이벤트가 발생할 때 불러오도록 한다. 


window.addEventListener("load",function()
{
     // write your code in here!!!
}

위와 같이 코딩을 하였다면 이제 Quintus 객체를 생성해서 초기 설정을 하도록 한다. 


    var Q = Quintus().include("Sprites, Scenes, UI, Touch, Input")
    .setup({
              width:   600, // Set the default width to 800 pixels
              height:  800, // Set the default height to 600 pixels
              scaleToFit: true // Scale the game to fit the screen of the player's device
    }).touch();


Quintus() 함수로 Quintus 객체를 선언하게 된다. 

선언 후 include 함수를 불러오는 데, include에 들어가는 내용은 사용하는 모듈을 불러오는 것이다. Quintus에는 여러개의 모듈로 구성되어 있다. 각각의 모듈은 독립적인 기능들로 구성되어 있다. Quintus 에서는 Sprite, Input, Scenes, 2D, Anim 등 여러가지 모듈을 제공하고 있다. 자세한 내용은 Quintus 홈페이지를 참고하면 좋을 것 같다. 

다음으로 setup 함수를 불러온다. setup함수에서는 여러가지 셋팅값들이 들어가게 된다. 여기선 width와 height를 600, 800으로 각각 적어두었다. 또, scaleToFit을 true로 설정해두었다. scaleToFit기능에 대해 자세한 설명은 하지 않겠다. 그런데 여기서 하나 문제가 있다. cdn에 있는 라이브러리를 사용하면 이 기능이 작동하지 않는다. 만일 라이브러리를 다운받아서 사용하면 scaleToFit이 정상적으로 동작한다. 한번 해보시길....

마지막으로 touch 함수를 불렀다. 이는 touch 모듈을 사용하려면 touch함수를 불러와야 한다. 왜 이렇게 만들었는지... 이해는 가지 않지만 그렇다고 한다. 흠흠흠...


이제 회전하는 판을 만들어보자. 


    Q.Sprite.extend("RotCircle",{
        init: function(p) {
            this._super(Q._extend({
                sliceCount: 5,
                rv: 0.0,
                rf: 0.0,
                sliceInfo:[]
            }, p||{w:400, h:400, x:Q.width / 2, y:Q.height / 2}));
        },
        draw: function(ctx){
            var sliceCount = this.p.sliceCount;
            var sliceDegree = 2.0/sliceCount;
            for(var i = 0; i < sliceCount; i++)
            {
                if(i%3 == 0){
                    ctx.fillStyle = "red";
                }else if(i%3 == 1){
                    ctx.fillStyle = "green";
                }else{
                    ctx.fillStyle = "blue";
                }

                ctx.rotate(sliceDegree * Math.PI );

                ctx.beginPath();
                ctx.arc(0,
                      0,
                      this.p.w/2,
                      Math.PI * (1.5 - sliceDegree / 2.),
                      Math.PI * (1.5 + sliceDegree / 2.));
                ctx.lineTo(0, 0);
                ctx.fill();

                var text = this.p.sliceInfo[i];

                ctx.textBaseline = "middle";
                ctx.font = this.p.font || "400 24px arial";
                ctx.fillStyle = this.p.fontColor || "white";
                ctx.textAlign = "center";
                var tx = 0;
                var ty = - (this.p.w / 5 * 2);
                ctx.fillText(text, tx, ty, 200);

            }
        },
        step: function(dt){
            var p = this.p;
            if(p.rv > 0){
                p.rv -= p.rf * dt;
                if(p.rv < 0){
                    p.rv = 0;
                }
            }else{
                p.rv += p.rf * dt;
                if(p.rv > 0){
                    p.rv = 0;
                }
            }

            p.angle += p.rv * dt;
            p.angle %= 360;
        },
        add: function(ds){
            if(this.p.sliceCount + ds < 1){
                return;
            }
            this.p.sliceCount += ds;
        },
        setSliceCount: function(count){
            if(count < 1){
                return;
            }
            this.p.sliceCount = count;
        },
        setSliceInfo: function(info){
            var array = JSON.parse("[" + info + "]");
            this.p.sliceInfo = array;
            this.setSliceCount(array.length);
        },
        getSliceInfo: function(){
            return this.p.sliceInfo;
        }
    });

    var circle = new Q.RotCircle();


위 코드를 보면 복합하다고 생각할 수 있으나 생각 보다 단순하다. 그냥 Sprite 객체를 확장해서 RotCircle이라는 클래스를 만들어 주고, circle 이라는 객체를 만들어 준것이 전부이다. 크게 잘라 보면 간단하다. 이제 하나씩 세부적으로 확인해보자. 

init 함수를 살펴보자. 문법에 관한 예기는 생략하겠다. (본인도 문법을 잘 익힌게 아니라... 흠... )...

init 함수에는 p라를 객체가 있다. p의 내부는 map 형태로 여러가지 정보를 가지고 있다. Q._extend() 함수는 p 객체에 내가 추가할 파라이터들을 정의한것이다. 그리고 p||{...} 부분에 나타난 것은 기존에 p 에 파라미터로 있는 것에 내가 다른 값을 넣기 위해서 사용한 것이다. 


그럼 draw 함수를 보자. draw 함수는 Sprite 객체 내에서 어떻게 나타내는지에 대해서 구현되는 함수이다. sliceCount를 가져와서 2 라디안씩 각도를 쪼개서 색을 다르게 조각을 그려주는 로직이 들어있다. draw 함수에는 ctx라는 객체가 파라미터로 있다 이는 context라고 하며 html5 에서 canvas에 그림을 그릴 때 사용되는 객체라고 보면 될 것이다. w3schools에도 context에 대한 설명이 있으니 확인해보자. 


step 함수는 dt값을 받으며 dt는 이전 step이 불려진 시간과 현재 시간과의 차이이다. step에서는 게임 객체에서 dt후 변화해햐 할 값들을 정의해주면 된다. 여기서는 회전 해야하니 회정하는 각도와 회전하는 속도가 변하도록 하였다. 


나머지는 add, set, get 등 간단한 함수이기 때문에 설명을 생략한다. 


회전판을 만들었는데 회전판이 돌도록 액션을 만들 버튼을 구현할 것이다. 코드는 다음과 같다. 


    var startButton = new Q.UI.Button(
        {
            label: "Start",
            y: 20,
            x: Q.width - 100
        }, function() {
            var diff = Math.random() * 500;
            circle.p.rv = 1000 + diff;
            circle.p.rf = 200;
        });


Q.UI.Button 을 활용해서 위와 같이 버튼을 만들어 주면 된다. 첫번째 파랍미터로 들어가 { label : .... } 은 버튼에 대한 파라미터가 들어가있는 곳이다. 두번째 파라미터 function() { ... } 이 부분은 클릭을 했을 때의 동작을 정의한 것이다. 


마지막으로 scene을 만들고 scene을 불러오는 함수를 보자. 


    Q.scene("main", function(stage)
    {
        var sliceInfo = "\"hello\", \"hi\", \"good\", \"bye\", \"wow\"";
        if(sliceInfo != null && sliceInfo.length > 0){
            circle.setSliceInfo(sliceInfo);
        }
        stage.insert(circle);
        stage.insert(startButton);
    });

    Q.stageScene("main");


위에서 보면 stage에 위에서 선언된 circle 과 startButton을 불러오면 된다. 


Quintus를 처음 보았을 때는 간단하고 사용하기 편해서 아주 좋은 엔진이라고 생각했다. 그런데 막상 써보니 빈틈이 많다. 예를 들어 Scale To Fit 기능도 상황에 따라 되는 경우와 안되는 경우가 있다. 

오픈소스의 단점이 완성도가 다소 떨어지는 것이니 감수해야할 부분이 아닐까 싶다. 그래서 Quintus 외에 다른 엔진들을 찾아 보기로 마음 먹었다. 

아 그리고 javascript를 좀 더 공부해야겠다...... 내가 만든 예제를 다시 보니.. 쩝 아쉬운게 많구만... 


저작자표시

'HTML' 카테고리의 다른 글

react-dropzone heic 파일 accept  (0) 2020.12.14
Quintus : 처음 쓰기에 괜찮은 HTML 게임 엔진  (0) 2015.12.08
'HTML' Related Articles more
Comments