티스토리 뷰

게임

몽대륙 JS 기반 REMAKE (1)

다국어엔지니어 2019. 3. 27. 00:46

 

 

어느날 느닷없이 몽대륙을 리메이크하고 싶다는 충동이 일었다.

 

그리고 PC, Android, iPhone에서 돌아가게 자바스크립트로 구현하고 싶다는 생각이 들었다.

 

우선 3D 스크롤 화면을 만들어 보고 싶었다.

 

동영상을 구해서 화면 캡쳐를 뜨기로 했다.

 

Win 10에서는 Windows Logo + Prt Sc로 화면 캡쳐 뜰 때마다 사진 아님 비디오 폴더에 자동으로 캡쳐 파일이 생성되는 데, Win 7에서는 글쎄...

 

Win7이라서 화면 캡쳐를 하나 하나 떠서 엑셀에 붙이기로 했다.

 

각 시트마다 그림을 붙이니까 시트를 클릭하면서 애니메이션 효과를 낼 수 있고 시트 순서를 쉽게 바꿀 수 있어서 좋기는 하다.

 

그런데 Win7에서는 동영상의 화면을 연속적으로 캡쳐하기 힘들다.

 

아무튼 개고생하면서 4개의 연속 화면을 캡쳐 해서 F10, F20, F30, F40이라고 png 형식으로 저장했다.

 

 

 

일단 떠 놓은 화면 4개 가지고 JS로 애니메이션 효과를 좀 내 봐야 겠다.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Penguin 2</title>
<script>
var status = "F";
var frame = 10;
function run() {
 
    var img =  status + frame + ".png";
    document.my_canvas.src = img;
       
    frame += 10;
    if (frame > 40) {
        frame = 10;
    }
   
    setTimeout("run()", 100);
}
function start() {
 run();
}
</script>
</head>
<body onload="start()">
<img name="my_canvas" src="./F10.png">
</body>
</html>

 

간단히 설명하면, my_canvas라고 명명한 img에서 표시하는 이미지 파일을 0.1초 마다 변경한다.

 

그럼 애니메이션에 잔상(?)이 나오지만 일단 애니메이션은 만들어 졌다.

 

잔상(?)은 그림판으로 직접 지워도 된다.

 

이번에는 화면 캡쳐가 힘들어서 4개 밖에 못 떴지만, 다음 블로그에서는 Win10으로 더 많이 뜰 생각이다.

 

하늘의 있는 구름도 한 사이클을 캡쳐할 생각이다.