はじめに tmlib.jsの製作者である@phiさんにお誘い頂き、Qiitaを始めてみました。 記事を書くのは慣れていないので分かりにくい点が多々あるかもしれませんが、どうぞよろしくお願いします。 tmlib.jsはゲーム制作を目的としたライブラリなので、当然ゲーム制作に最も適しているのですが、 ちょっとしたWebアプリをお手軽に作りたい!という時にも非常に役立ってくれます。 ですが、ドキュメント面がまだまだ乏しく、あまり知られていない機能も数多くあるようです。 今回はv0.3.0の新機能である「クリッピング機能」についてご紹介したいと思います。 クリッピングとは? クリッピングとは画像処理で主に使われる用語で、必要な部分だけを切り抜く操作の事です。 親要素の形に合わせて子要素を自動的に切り抜いてくれます。 文章だけでは何のことかさっぱり分かりませんので、さっそくサンプルを見てみましょう。
![[tmlib.js v0.3.0]クリッピング機能の紹介 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/aa8f585e6519b9872b4920d58ed7609e9d5eed8d/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-f625e957b80c4bd8dd47b724be996090.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZoPTMzNiZ0eHQ9JTVCdG1saWIuanMlMjB2MC4zLjAlNUQlRTMlODIlQUYlRTMlODMlQUElRTMlODMlODMlRTMlODMlOTQlRTMlODMlQjMlRTMlODIlQjAlRTYlQTklOUYlRTglODMlQkQlRTMlODElQUUlRTclQjQlQjklRTQlQkIlOEImdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZ0eHQtY2xpcD1lbGxpcHNpcyZ0eHQtYWxpZ249bGVmdCUyQ21pZGRsZSZzPWRmNDI1MjIwNTc0MDY4MDY3ZTg3NTA3NGFiZTdhNmYz%26mark-x%3D142%26mark-y%3D151%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwTW9neUZhcm0mdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWQ5YzA3ZTc2ODVjZjdlNTU3Mzk2Mzg0YjE4NTllN2Mz%26blend-x%3D142%26blend-y%3D491%26blend-mode%3Dnormal%26s%3Dd977d2d7240ae77f8904548793ac13a6)