タコキンのPスクール・ブログ

前回に引き続き「テオ・ヤンセン機構」をSvelteアプリで視覚化する話です。今回はテオ・ヤンセン機構で多足歩行を再現するまでの実装手順を紹介します。

今回のお題として「テオ・ヤンセン機構」を簡単に視覚化するため、SvelteでHTMLアプリを作って遊んでみます。

今回はSvelteアプリ作成に慣れるために、HTML＆CSSゲームなどに応用のできるタイマーっぽいものを一から作成する過程を解説してみます。

Html＆Cssは正確な意味ではプログラミング言語ではないのですが、得手のCssのテクニックを覚えると、非常に単純なミニゲームを作ることが出来るようになります。今回は、Cssゲーム＆スクラッチゲーム両方で使えるようなアニメーション用png画像をInkscapeで作成する方法を検討してみようと思います。

今回の内容もかなりディープなscratch-renderの使いこなしメソッドの一つであるpickメソッドを、スクラッチのアプリの核とも言えるscratch-vmで使うための注意点を詳しく解説します。

スクラッチ言語の開発環境(scratch-gui)のメインライブラリであるscratch-vmをフル活用するとScratch3の拡張機能をゲームの一部品として独立に組み込んだような使い方ができるようになります。今回はScratchで作り込んだスコアボードをモジュール部品として統合・カプセル化して使えるようにしてみたいと思います。

Scratchプログラミングにおいてスプライトを歩かせるように見せるには、コスチュームを一定時間ごとに切り替えてたり、位置が変わる度に進行方向に合わせたりするようにします。これが地味にScratchでプログラミングすると面倒ですので、より実践的なSVGの使い方としてclipPath要素とuse要素を用いたアニメーションをScratchアプリに組み込める拡張機能の自作方法を紹介します。

Scratchで扱えるベクトル画像はsvgとなりますが、Scratch3になってからはブラウザ駆動のSPA(Single-Page-Application)としてどのようなブラウザーからも動作するようになりましたので、よりWebと親和性の高いsvg画像を積極的に利用していく方が、Scratchゲーム開発の応用も捗っていくことと思います。今回はScratchアプリの基礎講座としてのsvg画像の取扱で重要なビューポート(Viewport)の概念と、使い方の基礎を説明していきます。

不定期ながら著者のスクラッチプログラミングの腕試しにレトロなRPG風〇〇を作ってみたりしております。今回はセリフ吹き出し用の固定ウィンドウを表示する拡張機能を作成してデモプログラムと併せてご紹介していきます。

前回から２回に分けて特集してきた、RPG風のタイルパターンを使ったマップを作成する拡張機能のお話も今回で最終回です。この記事ではScratch3の拡張機能を実装を具体的に解説していきます。今回はJavacriptによるプログラミングの内容が中心ですので、svg画像の取扱を操作するソースコードを取り扱うポイントを理解することが目的です。

前回に引き続きタイル画像からRPG風マップを構成するためのテクニックを解説していきます。この記事ではsvgマップの種となるcsvファイルを使って、Base64化したタイルの画像を所定の座標に張り合わせていくようなプログラムを作ります。

RPG風のマップをペン機能で作るという試みはウェブ検索するといくつか引っかかります。今回はもっと上級者向けの試みとして、svg画像から生成したマップの画像を直接内部でレンダリングさせるより高度な拡張機能を作ってみたいと思います。

今回のお題は、scratch-renderを使うためのビルドツールの構築と、Scracth3.0のレンダリング機能を取り出して簡単なプロジェクトを作成する流れを解説します。

現状のスクラッチで自由にフォント文字使う機能は用意されてありませんので、必要の際には自分で一から作成するしかありません。今回は試作的なテーマとして、一般的なttfファイルから初めてスクラッチプロジェクトに導入する方法を検討してみたいと思います。

スクラッチで簡単なコスチューム画像を利用して、スプライトにアニメーションで動かすようにしたい場合のプログラミングを解説します。