[TIL] DAY21,22_JS_1. 아틀라스, 2. JSON, 3. 움직이는 에니메이션 만들기

Monday. November 13, 2017 - 5 mins

Summary:

DAY21,22

20171113

TIL

#1. 아틀라스(Atlas)

#2. JSON

#2-1 Table

데이터를 전송하기 위한 가장 쉬운 방법
그렇다면 프로그램들끼리 테이블을 주고 받으려면?
#2-2 CSV(Comma separated file)
name,gender,age,h,w
hoyoung,boy,25,180,60
#2-3 JSon (www.json.org)
API에서 요청 후, 받는 데이터를 json으로 받는다.
```
{"name" : "honux",
"age" : "25"
}
```
#2-4 Todo

이미지파일에서 그림을 그리기 위한 정보를 추출한다.

{ "type" : "image",
  "name" : "game.png",
  "seq" : 1,
  "sx" : 10,
  "sy" : 70,
  "w" : 30,
  "h" : 40 }

My Coding

1. 움직이는 애니메이션 만들기(아틀라스)

javascript

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");

//image atlas data
var data = [{
"seq": 1,
"sx": 10,
"sy": 70,
"w": 38,
"h": 40},
{
  "seq":2,
  "sx":49,
  "sy":70,
  "w":26,
  "h":40
},{
  "seq" : 3,
  "sx" : 76,
  "sy" : 70,
  "w" : 26,
  "h" : 40},
  { "seq" : 4,
  "sx" : 100,
  "sy" : 70,
  "w" : 32,
  "h" : 45  },
  {
    "seq": 5,
    "sx": 131,
    "sy": 70,
    "w": 38,
    "h": 42
  }];

  data.push(data[3], data[2], data[1]);

  var bgImage = new Image();
  bgImage.src = "./game_bg.png";
  var image = new Image();
  image.src = "./game.png";

  function draw(d, x, y) {
    ctx.drawImage(image, d.sx, d.sy, d.w, d.h, x, y, d.w * 2.5, d.h * 2.5);
  }

  var delay = 7;
  var current = 0;
  var idx = 0;

  //초기 위치
  var x = 10;
  var y = 300;

  //dx, dy 는 x축, y축의 속도
  var dx = 2;
  var dy = -4;

  //xa, ya는 가속도
  var ya = 0.1;

  function drawAll() {
    ctx.clearRect(0,0, 640, 480);

    //draw background
    ctx.drawImage(bgImage, 0, 0, 640, 480);

    //draw Pin
    x = x + dx;
    dy = dy + ya;
    y = y + dy;

    if (x === 640) {
      dx = -dx;
    }
    if (y >= 300) {
      y = 300;
    }

    if (y!= 300) {
      idx = 1;
    }
    draw(data[idx], x, y);
    current++;
    if(current >= delay) {
      idx++;
      current = 0;
    }

    if(idx > 7) {
      idx = 0;
    }
    requestAnimationFrame(drawAll);
  }
  requestAnimationFrame(drawAll);

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="20171114(mkAtlas).css">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Making a Atlas</title>
</head>
<body>
  <div>
      <canvas id="canvas" width="640" height="480"></canvas>
  </div>
    <script src="20171114(mkAtlas).js"> </script>
</body>
</html>

css

canvas {
    border:1px solid #d3d3d3;
    background-color: #f1f1f1;
}

Jaewook Kwon

dreaming a iOS developer

[TIL] DAY21,22_JS_1. 아틀라스, 2. JSON, 3. 움직이는 에니메이션 만들기

Summary:

DAY21,22

20171113

TIL

#1. 아틀라스(Atlas)

#2. JSON

#2-1 Table

#2-2 CSV(Comma separated file)

#2-3 JSon (www.json.org)

#2-4 Todo

My Coding

1. 움직이는 애니메이션 만들기(아틀라스)

Jaewook Kwon