tmlib.js로 장면 제어

15891 단어 JavaScripttmlib.js
지난번까지.
게임 개발 2
구문을 사용합니다.
다음 하고 싶은 일 중 ①④
그 3 ~ 8은 tmlib이다.왜냐하면 js에서 한 번 할 수 있으니까.
게임을 양산할 수 있도록, 나는 가능한 한 빨리 모형화하고 싶다.
① 장면 제어
② 이미지 애니메이션 그리기 기능(2D 스플라인)
③ 사운드 파일 재생성
④ 입력 제어
⑤ 게임 데이터, 저장, 읽기
⑤ 게임에 따라 구조가 다르다고 생각해요.
따로 프로그램 라이브러리를 만들거나 사용하세요.
그래서 반복적으로 사용할 수 있는 템플릿을 만들어 봤어요.
tmlib.js에서
로드 화면, 제목 화면, 알림 화면의 종류를 선택하십시오
미리 준비해 두었기 때문에 아주 홀가분하다.
화면로드-제목화면-게임화면-알람화면
일련의 프로세스
이번의 모든 소스 코드는
이번에도 HTML 잘 써.
사운드 파일을 읽지 않으면 로컬도 이동합니다.
실제 제작 시 자산과 일부분을 읽어야 한다
게임 장면 클래스(GameScene) 섹션 수정
template.html
<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, user-scalable=no" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
        <title>ゲームタイトル</title>

        <script src="tmlib.js"></script>
<script>

/**
 * スクリーンサイズ
 */
var SCREEN_WIDTH  = 960;
var SCREEN_HEIGHT = 640;

/**
 * ゲーム起動処理
 */
tm.main(function() {
    // アプリケーション作成
    var app = tm.app.CanvasApp("#world");
    app.resize(SCREEN_WIDTH, SCREEN_HEIGHT); // 画面サイズに合わせる
    app.fitWindow(); // リサイズ対応
    app.background = "rgb(0, 0, 0)"; // 背景色をセット

    var loadingScene = tm.app.LoadingScene({
        assets: {"title":"title.jpg","result":"result.jpg"}, // 必要なアセットはここに追加
        nextScene: TitleScene,
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT,
    });

    // シーンの切り替え
    app.replaceScene(loadingScene);

    // tmlibの実行
    app.run();
});


/**
 * TitleScene
 */
tm.define("TitleScene", {
    superClass : "tm.app.TitleScene",

    init : function() {
        this.superInit({
            title :  "ゲームタイトル",
            backgroundImage: "title",
            width :  SCREEN_WIDTH,
            height : SCREEN_HEIGHT
        });

        // 画面(シーンの描画箇所)をタッチした時の動作
        this.addEventListener("pointingend", function(e) {
            // シーンの遷移
            e.app.replaceScene(GameScene());
        });
    },
});


/**
 * GameScene
 */
tm.define("GameScene", {
    superClass : "tm.app.Scene",

    init : function() {
        this.superInit();

        this.score = 0;
    },

    update: function (app) {

        app.replaceScene(ResultScene(this.score));
    },
});


/**
 * ResultScene
 */
tm.define("ResultScene", {
    superClass : "tm.app.ResultScene",

    init : function(score) {

        // スコア
        this.superInit( {
            backgroundImage: "result",
            score: score,
            msg:      "ゲームタイトル",
            url:      "",
            hashtags: ["tmlib.js"],
            width:    SCREEN_WIDTH,
            height:   SCREEN_HEIGHT
        });
    },

    // Backボタンを押したらTitleSceneに戻る
    onnextscene: function (e) {
        e.target.app.replaceScene(TitleScene());
    },
});

</script>
    </head>
    <body>
        <canvas id="world"></canvas>
    </body>
</html>
제목과 알림 화면의 이미지는 게임과 함께 바꿉니다
이번에는 적당히 공짜로 찍었어요.
제목 화면 이미지(title.jpg)

화면 이미지(result.jpg)

대충 해설하다.
페이지 뷰에서
tm.app.LoadingScene 클래스에서
필요한 리소스 읽기
   var loadingScene = tm.app.LoadingScene({
        assets: {"title":"title.jpg","result":"result.jpg"}, // 必要なアセットはここに追加
        nextScene: TitleScene,
        width: SCREEN_WIDTH,
        height: SCREEN_HEIGHT,
    });

    // シーンの切り替え
    app.replaceScene(loadingScene);
자산을 넣는 과정에서 병아리는 왔다갔다 회전한다
귀엽다.

이 화면은 tmlib입니다.js 내부에서 그렸으니까.
마운트 표현을 변경하려는 경우
・tm.app.LoadingScene 클래스 확장 여부
・로드 프로세싱은 tm입니다.asset.Loading 클래스를 사용하여 별도의 설치 표시 섹션 사용
필요했어
제목 화면은 tm입니다.app.TitleScene 레벨을 사용하면 편해요.
슈퍼인트 함수에서 제목 화면의 탭, 배경을 초기화하면 됩니다
제목 화면을 표시할 수 있습니다.
        this.superInit({
            title :  "ゲームタイトル",
            backgroundImage: "title",
            width :  SCREEN_WIDTH,
            height : SCREEN_HEIGHT
        });
화면은 tm입니다.app.ResultScene 레벨을 사용하면 쉬워집니다.
초기화 슈퍼인트 함수에서 배경과 메시지 지정하기
알림 화면을 표시할 수 있습니다.
그리고 트위터 글도 첨부되어 있고요.
점수를 발표할 수도 있고 url 링크를 가진 다른 사람이 놀 수도 있습니다.
(이 기능은 매우 편리하다.)
        // スコア
        this.superInit( {
            backgroundImage: "result",
            score: score,
            msg:      "ゲームタイトル",
            url:      "",
            hashtags: ["tmlib.js"],
            width:    SCREEN_WIDTH,
            height:   SCREEN_HEIGHT
        });
화면이 이런 느낌이야.

트위터 버튼으로 트위터 투고 화면으로 옮기기

tmlib.만지작거리다
나는 이런 작은 부분에 대해 매우 세심해서 매우 기쁘다.
작은 게임이라면 이 템플릿으로 빨리 만들 수 있을 거예요.
다음에는 2D 물리 엔진으로.
[백준] 1260번 DFS와 BFS
페이크, 스텁 및 모의는 무엇입니까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage