プログラミングは芸術だ!

web系エンジニアの備忘録 「プログラミングは芸術」を座右の銘として日々勉強中 最近Androidもやってます

tmlib.jsで四角形を描画

ライフゲームを制作したく、

とりあえずブラウザで動かすのがいいだろうということで、tmlib.jsの勉強中


tmlib.js:ゲームやツールを簡単に作る事ができるらしいjsのフレームワーク
Home | tmlib.js

公式チュートリアルが星の描画だったのだが、

四角形の描画をしようとおもったより、悩んだのでまとめておく

tm.main(function() {
// キャンバスアプリケーションを生成
var app = tm.display.CanvasApp("#world");
// リサイズ
app.resize(640, 960);
// ウィンドウにフィットさせる
app.fitWindow();

// シーンを生成&入れ替え
var scene = MainScene();
app.replaceScene(scene);

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

// シーンを定義
tm.define("MainScene", {
superClass: "tm.app.Scene",

//初期化
init: function() {
this.superInit();

//四角を定義し、このシーンに追加
var square = tm.display.Shape(100, 100).addChildTo(this);

//デフォルトカラーが黒で描画されたか分からないので、色を変えておく
square.canvas.clearColor("yellow");
square.setPosition(320, 480);
},
});


色を変更するやり方でだいぶ悩んだ

定義するときに引数でFillStyleを渡したりとやってみたがうまくいかず、とりあえずこの方法で描画できたのでよしとする!

合わせて読んでみてください!

charlie1012.hatenablog.jp

charlie1012.hatenablog.jp