[tmlib.js] スプライトのテクスチャをプログラムで生成する - Qiita
tm.display.Spriteのテクスチャに、プログラムで動的に生成した画像を利用する方法を紹介します。 やり方は至って簡単。 tm.graphics.Canvasオブジェクトを画像アセット名の代わりにコンストラクタに渡すだけです。 // キャンバスを用意 var t = tm.graphics.Canvas(); ... // いろいろ描く // スプライトに利用する tm.display.Sprite(t); // 100x100を横に12個並べたテクスチャを生成します var texture = tm.graphics.Canvas().resize(100 * 12, 100); for (var i = 0; i < 12; i++) { // 初期位置を保存しておきます texture.save(); // 右に100ずつずらします texture.translate(10
![[tmlib.js] スプライトのテクスチャをプログラムで生成する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a0b3ba13ce5cce3bc88938462fb291aecbfcf864/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCdG1saWIuanMlNUQlMjAlRTMlODIlQjklRTMlODMlOTclRTMlODMlQTklRTMlODIlQTQlRTMlODMlODglRTMlODElQUUlRTMlODMlODYlRTMlODIlQUYlRTMlODIlQjklRTMlODMlODElRTMlODMlQTMlRTMlODIlOTIlRTMlODMlOTclRTMlODMlQUQlRTMlODIlQjAlRTMlODMlQTklRTMlODMlQTAlRTMlODElQTclRTclOTQlOUYlRTYlODglOTAlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTRiZTI4MjJlZjY0Y2M4MGE0ZDJkYTQ2MzNmYjlmYzEy%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBkYWlzaGlfaG1yJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wOWUxZTI0ZjYyN2VhYTIxZjdmMWI2MjQ2Njk4ODZlMg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D11ea46d9876852948e9b1b1b19c3686a)
tmlib.jsで簡単アニメーション - Qiita
tmlib.jsで簡単アニメーション tmlib.jsには、オブジェクトを簡単にアニメーションさせるtweener機能がついてます。 tweener 連続で指定すると、アニメーション終了後に次のアニメーションにすすみます。 tm.display.RectangleShape(100,100) .addChildTo(this) .setPosition(0, 0) .tweener.clear() .to({x: 300, y: 200, alpha: 0.5}, 1000) .to({x: 500, y: 600, alpha: 1.0}, 1000) ; // 変化させる値,アニメーションする時間(ミリ秒),イージングの順番で指定する tm.display.RectangleShape(100,100) .addChildTo(this) .setPosition(0, 0) .tim
怒首領蜂再現を目標にしたWebベースの弾幕STG·GL-Shooter2 MOONGIFT
GL-Shooter2はHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 HTML5で作られるゲームジャンルが多彩になっています。今回は弾幕シューティングゲームをHTML5で再現したGL-Shooter2を紹介します。コンセプトとして怒首領蜂（どどんぱち）再現を掲げています。 ローディング中。すぐに終わります。 立ち上がりました。奇麗なグラフィックスです。 スペースキーでメニューを選択します。 いきなり弾幕。今は弾に当たっても死ぬことはありませんので安心です。 こちらのミサイルはCキーで発射します。 Cキーを押し続けるとビームになります。 今のところ当たっても死なないのでCキーを押してどんどん敵を倒していく楽しさだけを味わえます。エンジンにtmlib.jsを使っています。今後の開発が楽しみなソフトウェアです。 MOON
HTML5 Canvas で縦書き対応してみた | TM Life
表題の通り, HTML5 Canvas で縦書き対応してみました. 友人からずっと『tmlib.js で縦書き対応してくれ〜』って言われていたのですが, 自分が使う機会がなかったので実装渋ってました. ごめんなさい. 割とサクッとやれたので解説がてらサンプル載せておきます. tmlib.js は次のバージョン(0.1.6)から対応版リリース予定です. 近々リリースします!! Table of contents HTML5 Canvas 縦書きデモ HTML5 Canvas 縦書きする方法 HTML5 Canvas 縦書きデモ up HTML5 Canvas 縦書きする方法 縦書き描画の実装は下記のコードになります. tategakiという関数を実装しています.(ローマ字でごめんなさい, 良い感じの名前が思いつかなかったのでw) var tategaki = function(context
HTML5 Canvas で Polygon(多角形)描画 | TM Life
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. 今, JavaScript のゲームライブラリを制作しています. まだ公開前ではありますが, 整理がてら その中からチョコチョコと機能を晒していこうと思います. では早速, 今回は Polygon(多角形) を描画するサンプルを作りました. この多角形描画処理を使えば簡単に下図のようなキレイな三角形や色々な多角形を描画することができます. Sample and Download 今回制作したサンプルはこちらです. サンプルはこちらからダウンロードできます. Code Script ポリゴンを描画する関数を定義しているスクリプト(tm.polygon.js)のコードです. /** * @author phi *
HTML5でFlashに近づけるか？Adobe AnimateをJavaScriptで制御する | DECONCEPTER
手軽なHTML5アニメーションを作るならこれがベストかも 前回Adobe Edgeの雑感を書いたが、今回は実際にEdge Animateを使ってみる。アニメーション自体を作るのは簡単だが、クリックしたら再生など、ちょっとしたインタラクティブ性を加えるにはJavaScriptの記述が必要になる。手順としてまずAdobe Animateでアニメーションを作り、さらにJavaScriptで制御してみたいと思う。 今回作るサンプル 単純なサンプルではあるが、PLAYボタンを押したらアニメーションが開始し、ボタンの状態をPAUSEボタンに変化させるトグルボタンの実装と、アニメーションが一回再生されるごとにカウンターの数字が上がっていくサンプルを作る。 デモ Edge Animateで作られる要素 コンポジションとシンボルの2つの考え方で構成される。Flashで言うところのStageとMovieCli
超簡単♪ tmlib.js の Canvas クラスを使って様々な図形を描画しよう!! | TM Life
今回は tmlib.js を使って様々な図形を描画する方法について紹介します. tmlib.js ってなんぞや？って方は『JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました.』へ. GitHub Docs tmlib.js は標準の HTML5 Canvas をラップして機能を拡張しているので 様々な図形を簡単に描画することができます. 単純な図形描画の他にもグラデーションをかけたり, フィルターをかけたり 画像として保存したりってことも簡単にできるのでぜひ使ってみて下さい. もちろんサンプルは jsdo.it で作成しています. なので, 実際に動かしたり fork してコードをイジったりしてもらえると嬉しいです. Table of contents サンプル & コード 解説 四角形描画 三角形描画 円描画 スター描画 魔法陣サンプル その他機能
iPhone5 と iOS6 での HTML5開発についてあれこれ - webとかmacとかやってみようか R
本日、iOS6がリリースされましたね。明日は iPhone5 の発売日。Mobile Safari も大幅にアップデートされて、Web開発者にとって非常に気になります。 iPhone 5 and iOS 6 for HTML5 developers, a big step forward: web inspector, new APIs and more で素晴らしいまとめがありましたので、簡単に紹介したいと思います。 iPhone5 新しい画面サイズ 新しい 4インチ画面になり、解像度は WDVGA (Wide Double VGA) 640×1136px になりました。横幅はこれまでと変わりませんが、高さが 176px 増えました。 新しいシミュレーター Xcode4が新しくなり、iOS6のシミュレータが出ました。Mac AppStore からダウンロードできます。 何をすべきか 画面
Learn HTML5, CSS3, Javascript - video style tutorials
Learn HTML5, CSS3, Javascript and more... Video style walkthroughs showing cool stuff being created from scratch
alert('イチオシ'); // 書評 - JavaScript逆引きハンドブック : 404 Blog Not Found
2012年09月03日19:30 カテゴリ書評/画評/品評iTech alert('イチオシ'); // 書評 - JavaScript逆引きハンドブック 出版社より献本御礼。 JavaScript逆引きハンドブック 古籏一浩 待ってましたこういうの。 EcmaScript 5のサポートが一通り完了して、これからHTML5のAPIが充実していくという今は、JavaScriptを学ぶ最高の旬。だけどWebの情報は断片的で、折角の新APIを使おうにもどこから手をつけていいのかわからなかった。これで勝つる。 本書「JavaScript逆引きハンドブック」は、「Ruby逆引きハンドブック」の出版社によるJavaScriptのシソーラス。「辞書」や「参考書」なら巷にあふれかえっているJavaScriptであるが、これがなかなかなかった。ましてやES5にHTML5といった最新の機能をカヴァーしているも
html5でアプリの壁を超える方法
制限 同時に再生できる音源は1ファイルのみ 再生できるタイミングはユーザイベントのハンドラ内だけ プリロード不可 OS自体のサイレントモードと連動せず BGMを流すだけならこんな方法も $('<div>BGMを再生しますか？</div>').appendTo('body').click(function () { $(this).remove(); (new Audio('bgm.mp3')).play(); }); $('body').on('click', 'a', function (e) { e.preventDefault(); $.get($(this).attr('href')).success(function (html) { $('body').html(''); $('body').append($(html).find('body')); }) });
mizzz.jp
mizzz.jp 2018 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
第1回 次世代Web標準「HTML5」は今、どこまで使えるレベルにあるのか？
第1回 次世代Web標準「HTML5」は今、どこまで使えるレベルにあるのか？：なぜ今、HTML5なのか――モバイルビジネスに与えるインパクトを読み解く（1/2 ページ） 動きが速いモバイルビジネスの世界で、このところ急速に注目度が高まっているWeb技術が「HTML5」だ。HTML5はWebの世界をどのように変えるのか、どんなメリット、デメリットがあるのか、モバイルビジネスにどんな影響を与えるのか――。短期集中連載でKDDIリサーチフェローの小林雅一氏が解説する。 高度で多彩な情報処理機能を備えた、最新鋭のWeb技術「HTML5」がじわりとIT業界に浸透してきた。例えば米Microsoftが先頃プレビューを開始した次世代「Office Web Apps」。これは同社のフラグシップ製品である統合文書ソフト「Office」のWebアプリ版（クラウド版）であり、Internet Explorer（
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
