【JavaScript】国産ライブラリtmlib.jsを使ったアニメーション入門

introductory-javescript-tmlib

「tmlib.js」はゲームやブラウザツールを簡単に作る事ができる国産のJavaScriptライブラリです。「tmlib.js」を使うとアニメーションや画像表示、サウンドなどゲームなどに必要な処理がプログラミングしやすいようになります。

WEBサイトなどにもアニメーションやクリックしてアクションを起こすなど新しい要素をして取り入れてみても面白そうです。国産のライブラリなのでサンプルなども日本語で多く公開されています。

ダウンロード

「tmlib.js」のライブラリはこちらからダウンロード(GitHub)することできます。

基本的な使い方

使い方はシンプルに「tmlib.js」をscriptタグで読みこみ処理するコードを書くだけです。

<script src="tmlib.js"></script>
<script>
// TODO: ここにコードを書いていく
tm.main(function() {
alert("tmlib.js バッチリ読み込まれてるよ!!");
});
</script>

チュートリアルやサンプルなど公式サイトより紹介されておりますので参考になります。

ひよこアニメーション – tmlib.js – 0.1.7

ひよこをクリックすると絵柄が変わりアニメーションに切り替わります。

関連記事

美容室グランディール様ロゴ制作

富士宮市にある『美容室グランディール』様のロゴを制作いたしました。 お店のお名前である「grandir(グランディール)」はフランス語で「成長する・育つ・大きくなる」という意味を持つことから芽が育つ、そしてお客様から愛されるお店をなることをイメージしてハートをモチーフに...続きを読む

2015.02.06ロゴ制作美容室

藤枝おんぱく『東海道音楽祭~つながりのみち~』 in 大慶寺(4/18)

藤枝おんぱくのオープニングイベントより、『東海道音楽祭~つながりのみち~』 in 大慶寺(4/18)夜のフォトショットをお届けします。お寺を幻想的に彩るキャンドルナイト。普段とは違う雰囲気に、クラシック、アコースティック、フォルクローレなど様々なジャンルの音楽を楽しました。 ...続きを読む

2015.04.20フォトギャラリー

【CSS】counterを利用した自動ナンバリング

最近は、CSSというとCSS3にクローズアップされることが多いのですが、今回は、CSS2より追加された「counter(カウンタ)」の着目してみました。 CSSの「counter(カウンタ)」を使用すると連番などの自動ナンバリングの機能を実装することができます。 ...続きを読む

2015.02.09HTMLコーディング

【WP】標準ギャラリーをスライド式にするプラグイン『WordPress Canvas Gallery』

『WordPress Canvas Gallery』は、WordPressの標準ギャラリーをスライド式のギャラリーに対応させることができるプラグインです。 『WordPress Canvas Gallery』ダウンロード プラグインは「wordpress.org」のプ...続きを読む

2015.02.18WordPress

美容室グランディール様紹介カード制作

富士宮市にある『美容室グランディール』様の紹介カードを制作いたしました。お店を紹介するショップカードとしての機能と、お客様が親族・ご友人の方などに紹介いただける紹介カードの2つの機能があるカードです。光沢をつけて高級感のあるデザインにいたしました。 クライア...続きを読む

2015.02.18名刺・カード制作美容室