【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

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

関連記事

【無料】商用利用OKシームレステクスチャ「玄武岩(バサルト)」素材

自然の岩肌を表現したシームレスの無料で使えるテクスチャです。玄武岩(バサルト)の質感を再現しています。継ぎ目のないシームレス加工をしているテクスチャです。テクスチャマッピングやタイル敷の背景素材などにお使いいただけます。商用利用OKのフリー素材となっております。 テ...続きを読む

2025.07.29シームレステクスチャ

Bootstrap世代がつまずくモダンCSSの壁

Bootstrapを使って実務を回してきた人ほど、 モダンCSSに触れたときに、少し戸惑う瞬間はありませんか? CSS Gridも分かる。 Flexboxも理解している。 Tailwindの考え方も、理屈としては納得できる。 それでも...続きを読む

2026.01.08AI活用BootstrapCSS生成AI

新年あけましておめでとうございます。

あけましておめでとうございます。 昨年は格別 の御厚情を賜り、厚く御礼を申し上げます。 本年もデザインスタジオ・エフでは、皆様にご満足頂けるサービスを心がけていく所存でございますので、何とぞ昨年同様のご愛顧を賜わりますよう、お願い申し上げます。皆様のご健勝と皆様の益々のご...続きを読む

2022.01.01

【ソーシャルメディア】2004から2013年までのソーシャルメディアの成長

検索エンジンジャーナルによる2004から2013年までのソーシャルメディアの成長をあらわした図解です。( Search Engine Journal ) The Growth of Social Media v2.0 [INFOGRAPHIC] 図解をみてみると、...続きを読む

2015.02.17WEB

【JavaScript】カルーセルパネルを手軽に実装できるライブラリ『Owl Carousel』

カルーセル(carousel)とは、回転木馬(メリーゴーランド)や空港の回転コンベアーなどの意味を持つ言葉です。 WEBデザインにおいて、カルーセルは複数の画像やコンテンツなどが配置されくるくる回るように動く仕組みを指します。 今回は、このカルーセルを手軽に実装で...続きを読む

2015.02.10HTMLコーディング