作品集
ブロク記事で鋭意作成中(不定期)のスクラッチゲーム
ブロク記事で鋭意作成中(不定期)のHTML&CSSゲーム
ブログ
ブログ記事一覧です。ボタンをクリックして各トピックごとに記事をフィルタできます。
SVG画像関連
- HTMLアプリ Svelte SVG アニメーション
【SvelteでHTMLアプリ開発】テオ・ヤンセン機構の多足歩行をシミュレートしてみる
2022/05/15前回に引き続き「テオ・ヤンセン機構」をSvelteアプリで視覚化する話です。今回はテオ・ヤンセン機構で多足歩行を再現するまでの実装手順を紹介します。
ID#:82 - HTMLアプリ Svelte SVG アニメーション
【SvelteでHTMLアプリ開発】テオ・ヤンセン機構をSvelteアプリで再現してみる
2022/05/14今回のお題として「テオ・ヤンセン機構」を簡単に視覚化するため、SvelteでHTMLアプリを作って遊んでみます。
ID#:81 - HTMLアプリ Svelte SVG画像 タイマー
【HTMLアプリ作成】SvelteでSVG要素を直接操作して制限時間表示できるタイマーを作ってみる
2022/01/20今回はSvelteアプリ作成に慣れるために、HTML&CSSゲームなどに応用のできるタイマーっぽいものを一から作成する過程を解説してみます。
ID#:77 - HTMLゲーム作成 Inkscape SVG画像
【Html&Cssゲーム作成】Cssバックグラウンドスライド式のアニメーション用pngをInkscapeで作成する方法
2021/05/24Html&Cssは正確な意味ではプログラミング言語ではないのですが、得手のCssのテクニックを覚えると、非常に単純なミニゲームを作ることが出来るようになります。今回は、Cssゲーム&スクラッチゲーム両方で使えるようなアニメーション用png画像をInkscapeで作成する方法を検討してみようと思います。
ID#:41 - Scratch3 拡張機能 SVG画像 開発者向け
[scratch-vm] pickメソッドで高度なスプライトの操作を制御する
2021/03/02今回の内容もかなりディープなscratch-renderの使いこなしメソッドの一つであるpickメソッドを、スクラッチのアプリの核とも言えるscratch-vmで使うための注意点を詳しく解説します。
ID#:52 - Scratch3 拡張機能 SVG画像 開発者向け モジュール化
[実践・Scratch3拡張機能]〜scratch-vmでスコアボードのゲーム・モジュール化
2021/02/20スクラッチ言語の開発環境(scratch-gui)のメインライブラリであるscratch-vmをフル活用するとScratch3の拡張機能をゲームの一部品として独立に組み込んだような使い方ができるようになります。今回はScratchで作り込んだスコアボードをモジュール部品として統合・カプセル化して使えるようにしてみたいと思います。
ID#:49 - Scratch3 拡張機能 開発者向け SVG画像 RPG風ゲーム
[Scratch開発者向け講座] SVG画像からスプライトをアニメーション的に動かす拡張機能の作成方法
2021/02/15Scratchプログラミングにおいてスプライトを歩かせるように見せるには、コスチュームを一定時間ごとに切り替えてたり、位置が変わる度に進行方向に合わせたりするようにします。これが地味にScratchでプログラミングすると面倒ですので、より実践的なSVGの使い方としてclipPath要素とuse要素を用いたアニメーションをScratchアプリに組み込める拡張機能の自作方法を紹介します。
ID#:48 - SVG画像 スクラッチ HTMLアプリ 基礎講座
[Scratch基礎講座] SVG画像をScratchステージの背景として使う 〜 viewportの意味とviewBox属性の使い方
2021/02/14Scratchで扱えるベクトル画像はsvgとなりますが、Scratch3になってからはブラウザ駆動のSPA(Single-Page-Application)としてどのようなブラウザーからも動作するようになりましたので、よりWebと親和性の高いsvg画像を積極的に利用していく方が、Scratchゲーム開発の応用も捗っていくことと思います。今回はScratchアプリの基礎講座としてのsvg画像の取扱で重要なビューポート(Viewport)の概念と、使い方の基礎を説明していきます。
ID#:47 - Scratch3 SVG画像 拡張機能 開発者向け RPG風ゲーム
[スクラッチ x RPG] RPG風の吹き出しを表示する拡張機能
2021/02/10不定期ながら著者のスクラッチプログラミングの腕試しにレトロなRPG風〇〇を作ってみたりしております。今回はセリフ吹き出し用の固定ウィンドウを表示する拡張機能を作成してデモプログラムと併せてご紹介していきます。
ID#:46 - Scratch3 SVG画像 拡張機能 開発者向け RPG風ゲーム
[Scratch3 拡張機能] svg画像からRPG風のマップを生成する拡張機能を作る〜拡張機能の実装③
2021/02/05前回から2回に分けて特集してきた、RPG風のタイルパターンを使ったマップを作成する拡張機能のお話も今回で最終回です。この記事ではScratch3の拡張機能を実装を具体的に解説していきます。今回はJavacriptによるプログラミングの内容が中心ですので、svg画像の取扱を操作するソースコードを取り扱うポイントを理解することが目的です。
ID#:45 - Scratch3 SVG画像 拡張機能 開発者向け RPG風ゲーム
[Scratch3 拡張機能] svg画像からRPG風のマップを生成する拡張機能を作る〜マップ作成編②
2021/02/02前回に引き続きタイル画像からRPG風マップを構成するためのテクニックを解説していきます。この記事ではsvgマップの種となるcsvファイルを使って、Base64化したタイルの画像を所定の座標に張り合わせていくようなプログラムを作ります。
ID#:44 - Scratch3 SVG画像 拡張機能 開発者向け RPG風ゲーム
[Scratch3 拡張機能] svg画像からRPG風のマップを生成する拡張機能を作る〜準備編①
2021/02/01RPG風のマップをペン機能で作るという試みはウェブ検索するといくつか引っかかります。今回はもっと上級者向けの試みとして、svg画像から生成したマップの画像を直接内部でレンダリングさせるより高度な拡張機能を作ってみたいと思います。
ID#:43 - scratch-render SVG画像 開発者向け
scratch3.0のディープな使い方 ~ scratch3.0のレンダラー(scratch-render)だけを動かしてみる
2020/12/18今回のお題は、scratch-renderを使うためのビルドツールの構築と、Scracth3.0のレンダリング機能を取り出して簡単なプロジェクトを作成する流れを解説します。
ID#:40 - Scratch3 SVG画像 フォント 上級編
[スクラッチ上級者講座] 任意のフォントファイル(ttf)から個別のsvg画像に変換してコスチュームとして使う方法
2020/11/19現状のスクラッチで自由にフォント文字使う機能は用意されてありませんので、必要の際には自分で一から作成するしかありません。今回は試作的なテーマとして、一般的なttfファイルから初めてスクラッチプロジェクトに導入する方法を検討してみたいと思います。
ID#:34 - Scratch3 SVG画像 基礎講座
[Scratch3] コスチュームを変えてスプライトのアニメーション効果を付ける
2020/08/17スクラッチで簡単なコスチューム画像を利用して、スプライトにアニメーションで動かすようにしたい場合のプログラミングを解説します。
ID#:10