02:「シーンを作ろう」 – tmlib.js入門用チュートリアル！避けゲーを作ってみよう

Post author By admin
Post date 2013年6月17日
48 Comments on 02:「シーンを作ろう」 – tmlib.js入門用チュートリアル！避けゲーを作ってみよう

シーンを作ってみよう

サンプル

コードの解説

今回はtitleを表示させますので、titleが最初に表示されるようにmain.jsを作り変えましょう。シーンの切り替え処理を追加した後、シーンを切り替えた後のtitle画面の処理を追加します。

/**
 * ゲーム用定数作成
 */
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)"; // 背景色をセット

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

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


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

    init : function() {
        this.superInit({
            title :  "避けゲー制作チュートリアル",
            width :  SCREEN_WIDTH,
            height : SCREEN_HEIGHT
        });
    },
});

新しくtitle用のシーンを追加しました。title画面を簡単に作成できるようにtmlib.jsが用意しているので、それを上書き(クラスの継承)を行なって実装します。これだけのコードの追加でゲームのタイトルを作ることができます。

もうちょっと詳しく解説

シーンの処理のコードについてもう少し踏み込んで解説していきます。

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

    init : function() {
        this.superInit({
            title :  "避けゲー制作チュートリアル",
            width :  SCREEN_WIDTH,
            height : SCREEN_HEIGHT
        });
    },
});

tm.main関数とはまた少し違った形になっていますね。”TitleScene”とはクラスの名前です。tm.defineという関数を使ってクラスを作成します。
　
クラスの生成処理はJavaScript標準の機能ではなく、tmlib.jsがサポートしている機能です。JavaScriptではない言語でお馴染みのクラスが簡単に作れます。クラスという言葉に覚えが無い方は、またコレもおまじないだと思ってください。
　
title画面として必要な機能は、tm.app.TitleSceneクラスで用意されています。この機能を流用(継承)している感じです。以下のコードで流用しますよと明言しています。

        superClass : "tm.app.TitleScene",

このように、コードを流用することで複雑な処理も簡単に書けるようになっています。自分で作ったクラスも流用していけばこれから先も楽ができますね。
　
次はinit関数です。クラス内のinit関数は、このクラスが使われた際に最初に呼ばれる関数です。(コンストラクタとも言います)

    init : function() {
        this.superInit({
            title :  "避けゲー制作チュートリアル",
            width :  SCREEN_WIDTH,
            height : SCREEN_HEIGHT
        });
    },

クラスを使った際、最初に呼ばれる処理なので変数の初期化などに使います。また、this.superInit関数を呼び出すことで、流用元(継承元)であるtm.app.TitleSceneクラスのinit関数を呼び出せます。これで連鎖的に初期化の処理が呼べます。

複数のシーンを用意しよう

サンプル

コードの解説

タイトルを描画するシーンは作ったので、これからゲームの動作を作っていくシーン(MainScene)と、ゲームが終了した時のシーン(EndScene)を作っておきましょう。

/**
 * ゲーム用定数作成
 */
var SCREEN_WIDTH  = 960;
var SCREEN_HEIGHT = 640;
var RESULT_PARAM = {
        score: 256,
        msg:      "【避けゲー制作チュートリアル】",
        hashtags: ["omatoro", "tmlibチュートリアル"],
        url:      "http://omatoro.github.io/tmlib.js_tutorial_avoidgame/",
        width:    SCREEN_WIDTH,
        height:   SCREEN_HEIGHT,
        related:  "tmlib.js Tutorial testcording",
};

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

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

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


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

    init : function() {
        this.superInit({
            title :  "避けゲー制作チュートリアル",
            width :  SCREEN_WIDTH,
            height : SCREEN_HEIGHT
        });
    },
});


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

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


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

    init : function() {
        this.superInit(RESULT_PARAM);
    },
});

EndSceneはゲームが終了したときのシーンですね。スコアの表示など行います。
　
EndSceneもtmlib.jsに専用のクラスが準備されています。Twitterへの投稿処理や、戻るボタン(Backボタン)が既に組み込まれています。いたせり付くせりですね。RESULT_PARAM変数のurlを変えると、Twitterでつぶやく時に表示するリンクなどを変えることができます。ハッシュなども変更できます。

複数のシーンを繋げよう

サンプル

コードの解説

作ったシーンをつなげてみます。繋げ方は、tm.main関数で使ったreplaceScene関数を使います。ハイライトしてる部分ですね。

/**
 * ゲーム用定数作成
 */
var SCREEN_WIDTH  = 960;
var SCREEN_HEIGHT = 640;
var RESULT_PARAM = {
        score: 256,
        msg:      "【避けゲー制作チュートリアル】",
        hashtags: ["omatoro", "tmlibチュートリアル"],
        url:      "http://omatoro.github.io/tmlib.js_tutorial_avoidgame/",
        width:    SCREEN_WIDTH,
        height:   SCREEN_HEIGHT,
        related:  "tmlib.js Tutorial testcording",
};

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

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

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


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

    init : function() {
        this.superInit({
            title :  "避けゲー制作チュートリアル",
            width :  SCREEN_WIDTH,
            height : SCREEN_HEIGHT
        });

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


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

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

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


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

    init : function() {
        this.superInit(RESULT_PARAM);
    },

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

実行してみて、画面をタッチ(or クリック)してみてください。画面が切り替わるのが分かります。

もうちょっと詳しく解説

シーンを遷移させるために画面をタッチ(or クリック)した判定を作る必要がありますが、またこれもtmlib.jsで既に用意されています。スマートフォンのタッチとマウスのクリック同時に対応できるというスグレモノです。

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

addEventListener関数を使ってタッチイベントを登録します。”pointingend”とありますね？　言葉の通りタッチが終了した瞬間(指を離した瞬間)にこの処理が呼び出されます。じゃあ”どこ”をタッチした時の処理なのかというと、this.addEventListenerとなっていますのでthisをタッチした時の処理です。thisはこのクラスを指しているので、シーン全体(画面全体)が判定範囲となります。

EndSceneは画面全体ではなく、ボタンを押したときのみシーンを移動します。Backボタンを押したときの動作を作るときは次のように記述します。

    // Backボタンを押したらTitleSceneに戻る
    onnextscene: function (e) {
        // ここに処理を書く
    },

いかがでしたか？シーンの作成とシーンをつなぐ処理も簡単にできましたね。シーンの作成まではどのゲームにも利用できますので、ひな形として保存いておくと次に繋げやすくなるのでオススメです。

48 replies on “02:「シーンを作ろう」 – tmlib.js入門用チュートリアル！避けゲーを作ってみよう”

new jordan shoes…

For au pair companies, the twenty first century customer’s “Top Five” list is a challenging one. Au pair agencies that cannot deliver these 5 things will lose customers and face failure. Are available at intermediate, advanced or degree level, and a…

buy jordans…

Identified as missing canoer Memorial Day festivities held in Centre Co. Centre Co. Because you may have a wide range of intended audiences, the level and amount of education and training that you provide should be tailored to each audience. Education …

jordan 6 history of jordan…

Against this for a number of reasons, but primarily because we lose our connectionalism, said the Rev. Tom Groome, pastor of First Presbyterian Church Tupelo, explaining that whereas now there is one ordination standard, the amendment would leave it up…

Black Infrared 6s…

Really Betty? What is wrong with kids getting proactive about what is clearly a difficult time for our country? I think it is nothing short of amazing. I say I am proud of the next generation of people here. I say kudos kids and never listen to those w…

jordan 11 concord…

Merkel spokesman Ulrich Wilhelm said she spoke with Obama Wednesday evening and the two agreed to remain in contact on the issue. Merkel told him the government would press for GM quickly to put forward a new plan for Opel. Congress. German officials s…

black infrared 6s…

Children’s Ombudsman Emily Logan has welcomed the move by the HSE which will see all these separated children removed from what she describes as “inferior care services” in the new year. Instead, they will be treated the same as Irish children and r…

jordans for sale…

Use of warm compresses is the mainstay of treatment. The moment you experience this, start applying a warm compress to the affected area on your lid. A wash cloth soaked in warm water works well; just be sure the water is not too hot. It is something I…

Jordan 13 Barons…

The human immunodeficiency virus or HIV leads to acquired immune deficiency syndrome, or AIDS. HIV works by destroying the body’s T cells, which will slowly but surely cause the immune system to deteriorate and prevent it from fighting off viruses and…

Jordan 6 Black Infrared…

I applaud my colleagues, Sen. Roger Katz, R Augusta, and Sen. Tom Saviello, R Wilton, for reaching across the aisle to support expansion. “There will be more and greater potential for cyber attack because there will potentially more vectors of attack,…

low aqua 11s…

Featuring 18 inch black alloy wheels, the car also got acoustic rear parking sensors, Amundsen satellite navigation system, DAB radio and vRS leather upholstery. The introduction of the suspiciously similarly sized Rapid model in 2012 signalled that th…

jordan 11 retro low infrared 23…

2. One day lift tickets are $40 adult, $36 youth, $31 child and $36 senior. Season passes are $379 for adults, $319 for youth and $259 for children. BUILD A NEW TERMINAL AT ARMSTRONG INTERNATIONAL. THE CONSORTIUM THAT LOST THE FIRST ROUND OF THIS SAGA….

Jordan 11 Legend Blue…

Mottola points to another possible connection between gravastars and astronomical observations. Three years ago, data from distant stellar explosions suggested that the expansion of the Universe is getting faster all the time (New Scientist, 11 April 1…

jordans for sale…

The state funded program initiated by researchers from the University of Alaska will study whether posters warning women of the dangers of drinking while pregnant are more effective when posted on pregnancy test dispensers, as opposed to simply being h…

Jordan 13 Barons…

We learned that building a paper model helps visualize the idea better, so like most 3rd grade classes we have lots of fun with butcher paper, scissors, tape, staples and glue. Once we get a paper model right, we turned to the sewing machines. It amazi…

Jordan 11 Legend Blue…

SB 1182, sponsored by Sen. Worton managed only one catch for nine yards versus Houston, but it was enough for him to become the 10th Knight to amass over 2,000 career receiving yards. I stayed here and tried to listen to the crowd. Nearly a year ago, G…

Legend Blue 11s…

Thanks for all the posts of the people who live there. The attack killed at least 30 people and wounded dozens more, the Syrian Observatory for Human Rights reported.. The GOP needs to retake the state Senate to have any voice when those new lines are …

jordan 13 black red…

In August 2011, for example, Gen. It’s an extremely scary place to be.”. You’re always like, ‘this is going to be great!’ Then you’re just depressed.” But at leastwhen you looked in a mirror on acomedown in the morning George,you realisedyou WER…

jordan 13 hologram…

On 29 May, Boko Haram’s leader Abubakar Shekau, following military claims that the group had been halted,[7] released a video in which he said the group had not lost to the Nigerian armed forces. But another Pleasant Prairie voter said he couldn’t fo…

Jordan 11 Legend Blue…

“You go from one zany situation to the other.” One criticism has been that this show is more theater than ballet, to which Wheeldon replies: “That’s kind of the point!”. In February, police raided 2,000 establishments and detained more than 900 pe…

Jordan 13 Barons…

If more people were willing to discuss issues with care and consideration for what we could learn from any situation, then likely more difficulties could be prevented. Ideally, door locks and alarms, fencing with special safety locks and regular superv…

doudoune canada goose…

nike air max UGGS Pas Cher [url=http://www.notaires-caen-caumont.org/nikeblazerpascher.html]nike blazer pas cher[/url] qzpupgifxca [url=http://www.levaufre.vendee.notaires.fr/doudounecanadagoose.html]doudoune canada goose[/url] nike blazer Doudoune Mon…

jordan 6 black infrared…

[url=http://www.aimsedu.ae/LegendBlue11s/]LegendBlue11s[/url] Jordan11LegendBlue [url=http://www.londoncanadianstudies.org/blog.html]Black infrared 23 13s[/url] [url=http://www.kurukahveci.com/blackinfrared6s.html]black infrared 6s[/url] jordan 11 lege…

nike free run…

It all started with a fight over beer and cigarettes. Campbell and Bill Walczak, a fellow Dorchester resident and founder and director of the 25 year old health center, first got to know each other working on a 1985 campaign to fight billboards adverti…

louboutin pas cher…

The Italian owned oil company ENI, which operates the pipeline, says it has lost 4,000 barrels per day from the destruction of the pipeline. Unlike attacks in the past, Saturday’s attack did not have an immediate impact on global oil prices. The price…

chaussure ugg pas cher…

[url=http://www.genexco.com/MonclerSoldesFrance/]Moncler Soldes France[/url] canada goose homme pas cher Moncler Soldes France [url=http://www.leroyallafayette.com/CanadaGooseSoldes/]Canada Goose Soldes[/url] [url=http://www.notaire-conseil.fr/doudoune…

Roger vivier outlet…

hogan uomo [url=http://www.salivolivela.it/borsebottegaveneta/]borse bottega veneta[/url] ysgxvotcqi fceulez vtwdrs gjjovnvruf [url=http://www.gucciniauto.it/hoganDonna/]hogan Donna[/url] hogan uomo [url=http://www.mondotravel.it/ScarpeRogervivier/]Sca…

giuseppe zanotti pas cher…

doudoune canada goose UGGS Pas Cher ugg pas cher [url=http://www.tilmant.eure.notaires.fr/canadagoosepascher.html]canada goose pas cher[/url] [url=http://www.notaires-alencon-mortagne.com/tod%27spascher.html]tod’s pas cher[/url] wipuwy tod’s pas cher…

bottes ugg pas cher…

Giuseppe Zanotti Soldes France [url=http://www.office-estuaire.net/nikeblazerHomme.html]nike blazer Homme[/url] nike blazer Femme Acheter Isabel Marant pas cher tod’s pas cher femme [url=http://www.yonnet-brecey.notaires.fr/chaussuresGiuseppeZanotti.h…

louboutin pas cher…

nike blazer pas cher [url=http://www.tilmant.eure.notaires.fr/canadagoosepascher.html]canada goose pas cher[/url] [url=http://www.notaires-caen-caumont.org/nikeblazerpascher.html]nike blazer pas cher[/url] [url=http://www.notaires-alencon-mortagne.com/…

Scarpe Roger vivier…

It definitely my passion,” Miller told FOX5.The fight was stopped in the second round after Miller delivered a body kick and hard right hand that dropped Williams.”I eventually relaxed in the second round, caught my opponent with a lucky punch and en…

Ugg Pas Cher Pour Homme…

Northside faces Spencer at Kinnett Stadium on Saturday, Sept. 6.Harris County ready for Carver matchupHarris County ready for Carver matchupThe Harris County Tigers are relishing their role as underdog in Friday’s matchup against Carver.The Harris Cou…

black infrared 6s…

jordan 6 black infrared [url=http://www.myasthenia-gbspk.org/blackinfrared6s/]black infrared 6s[/url] black infrared 6s [url=http://kamaltrading.com/jordan6BlackInfrared/]jordan 6 black infrared[/url] black infrared 6s suyqxxypvmk [url=http://www.truew…

nike air max pas cher…

tod’s pas cher [url=http://www.genexco.com/MonclerSoldesFrance/]Moncler Soldes France[/url] udrnmkhmkpo [url=http://aventure-danse.com/isabelmarant/]isabel marant pas cher[/url] [url=http://www.scpbanville-teniere.com/doudounecanadagoosepascher.html]d…

Fendi Borse…

nbkbvb Peuterey Outlet Online canada goose pas cher hqrfijwmy qvbrwqzezoq canada goose pas cher acakmgf [url=http://www.hvm.be/isabelmarantpascher/]isabel marant pas cher[/url] [url=http://www.portadoriente.it/fendiborse/]Fendi Borse[/url] [url=http://…

Hogan Elective Scarpe Outlet…

Peuterey Outlet uomlpj asyexatye [url=http://www.gucciniauto.it/hoganDonna/]hogan Donna[/url] scarpe roger vivier outlet peuterey prezzi yzgdlh Borse Bottega Veneta Outlet dcxuzzpnead ezdkuriyoid [url=http://www.ciroamodio.it/LouisVuittonsitoufficialeb…

Doudoune Moncler France…

itspyvm [url=http://www.notaires-tesson-lelong-dieppe.fr/chaussuresisabelmarantFrance.html]chaussures isabel marant France[/url] moncler pas cher dwjluukxx [url=http://www.lorda-delafosse.notaires.fr/chaussureLouboutinFemme.html]chaussure Louboutin Fem…

hogan rebel…

borse fendi prezzi louis vuitton saldi ewbdjlxgr nexuuot dibdadmwi oger vivier donna ujrzgbieg egjqill [url=http://www.ciroamodio.it/ScarpeUomoHogan/]Scarpe Uomo Hogan[/url] [url=http://bonarrigo.it/Rogerviviersandali/]Roger vivier sandali[/url] [url=h…

Roger vivier outlet…

[url=http://www.ferramentacalcagno.it/peutereyprezzi/]peuterey prezzi[/url] Fendi Outlet Fendi Borse bottega veneta outlet [url=http://www.hvm.be/nikefreefunpascher/]nike free fun pas cher[/url] [url=http://www.clinica-salus.it/prezziborselouisvuittonO…

jordan 7 french blue…

[url=http://www.toko-imports.com/jordan7frenchblue/]jordan 7 french blue[/url] legend blue 11s hwpkocfz jordan 11 pantone yytueelfj rxpoaxl columbia 4s gtvwhjmgpny jordan 11 pantone blue zmnbvqmms [url=http://www.ecahanimals.org/legendblue11s/]legend b…

lanvin sneakers uk online…

isabel marant uk online barbour jackets uk sale Dsquared2 Shoes uk fitflop sandals uk bottega veneta bags uk [url=http://www.manxlines.co.uk/lanvinsneakersuk/]lanvin sneakers uk[/url] smqycwpec [url=http://www.neessexccg.nhs.uk/bottegavenetabagsuk/]bot…

Doudoune Moncler Femme…

[url=http://www.bleumarineimmobilier.com/UggPasCherPourHomme/]Ugg Pas Cher Pour Homme[/url] [url=http://www.leconte-boos.notaires.fr/nikeblazerFemmepascher.html]nike blazer Femme pas cher[/url] [url=http://www.chaudet.notaires.fr/SneakersIsabelMarant.h…

doudoune canada goose pas cher…

tod’s pas cher bhllodd Moncler Soldes France keehaor [url=http://www.nicolas-isigny.notaires.fr/monclerpascher.html]moncler pas cher[/url] wdrwpoba femruvnx [url=http://www.bpa-bennes.com/nikeairmax/]nike air max[/url] Sneakers Isabel Marant louboutin…

jordan 11 pantone…

dwucbpa [url=http://laurel-park.org/jordan4columbia/]jordan 4 columbia[/url] legend blue 11s rclrhb [url=http://www.misoandthekingfisher.com/jordan11legendblue/]jordan 11 legend blue[/url] [url=http://www.interculturalcompetency.com/jordan4columbia/]jo…

Borse Bottega Veneta Outlet…

[url=http://www.laconcadelletna.it/public/borselouisvuittonoutlet/]borse louis vuitton outlet[/url] Peuterey Outlet Roger vivier outlet hogan uomo [url=http://www.microsystem.it/UserFiles/borsefendi/index.html]borse Fendi[/url] [url=http://www.associaz…

legend blue 11s…

nzpxsw [url=http://www.misoandthekingfisher.com/jordan4columbia/]jordan 4 columbia[/url] legend blue 11s zbzuqedkv [url=http://www.ashlandwelsh.com/jordan4columbia/]jordan 4 columbia[/url] [url=http://www.ashlandwelsh.com/jordan11legendblue/]jordan 11 …

isabel marant pas cher…

Tod’s Soldes zyrpuznyeag Mocassin TOD’S pour Homme whzfwa louboutin pas cher [url=http://www.notaires-alencon-mortagne.com/isabelmarantpascher.html]isabel marant pas cher[/url] nike blazer Homme louboutin pas cher tod’s pas cher [url=http://www.offi…

french blue 7s…

[url=http://www.starwomb.com/jordan11pantoneblue/]jordan 11 pantone blue[/url] jordan 7 french blue [url=http://www.westfieldfarm.com/jordan11legendblue/]jordan 11 legend blue[/url] [url=http://www.termoforma.com/pantoneblue11s/]pantone blue 11s[/url] …

jordan 7 french blue…

japojoettw Jordan 10 Lady Liberty jordan 11 legend blue ainzygxjcp gghxnzlw zmhskrkby jordan 7 french blue [url=http://www.lydiasimon.com/BullsOverBroadway10s/index.html]Bulls Over Broadway 10s[/url] icnosz jordan 7 french blue [url=http://www.iseco.bi…

シーンを作ってみよう

サンプル

コードの解説

もうちょっと詳しく解説

複数のシーンを用意しよう

サンプル

コードの解説

複数のシーンを繋げよう

サンプル

コードの解説

もうちょっと詳しく解説

48 replies on “02:「シーンを作ろう」 – tmlib.js入門用チュートリアル！避けゲーを作ってみよう”

Leave a Reply Cancel reply