🧑‍💻

Scratchでオリジナルキャラクターを動かそう！ (1) テレんじゃー大地に立つ！

2022/09/03に公開

3件

はじめに

CoderDojoというボランティア団体で、子供達のプログラミングスキル習得の支援をしております。プログラミングの開発環境は、主にScratchを使っていますが、チュートリアルの次のレベルの教材を充実させたいと感じており、本シリーズの執筆を開始しました。

Scratchは標準でついてくるスプライトや背景が充実しているので、その素材を使ったプログラミングから入るのが手っ取り早いですが、同じような作品ばかりになってしまうのが難点です。道場がScratchマスコットキャラクターの猫で溢れかえるような事態になりかねません😭。

一方で、オリジナルの素材を読み込んで活用するためにはいくつかハードルがあります。本シリーズではステップ・バイ・ステップでこれらのハードルを越えていきたいと思います！

テレんじゃー大地に立つ❗️❗️❗️

知人の娘さんが描いた「デジタル戦隊テレんじゃー」の「テレッド」をオリジナル素材のキャラクターに採用させていただきました。「デジタル戦隊テレんじゃー」のストーリーは追々紹介しますが、先ずは素材を読み込んで簡単なアニメーションを表示するまで進めます。今回の成果物は以下になります。

Scratchのサイト: テレんじゃー大地に立つ！

テレんじゃー大地に立つ！

素材の作成

素材の作成方法

Scratchにオリジナル素材を組み込む方法は以下の２つがあります。

Scratchのコスチュームエディタでオリジナルのキャラクターを描く
Scratch以外のツールで作成したオリジナル素材を読みこんで使う

前者はScratch単体で完結するためお手軽ですが、使い慣れたツールがある人は後者を選択した方が効率的です。また、後者を応用すれば、自分以外の人が作った素材も取り込むことができます。本シリーズでは後者の方法を採用して進めます。

ProcreateとAffinity Designerによる素材の作成

以降、私のやり方を紹介します。

下書きの作成(Procreate)

下書きはいつもiPad ProのProcreateで作成しています。書き味もよく、操作も直感的でiPadとApple Pencilをお持ちの方におすすめのソフトです。

https://procreate.art/jp

下書き段階ではテレッドの息子を主人公にしようと思って描いたので子供のキャラクターになっていますが😅、本素材をAffinity Designerで編集する際に、パーツの大きさを調整してお父さんのテレッドに修正しています。このくらいの単純な素材ならこのくらいラフに作成しても問題ありません。なお、以下の動画はProcreateのタイムラプス機能で作成しています。

テレんじゃーラフ

本素材の作成(Affinity Designer)

Scratchのスプライトはサイズ変更しても画像が荒くならないsvg形式の画像に対応しています。このsvg形式の画像を作成するためにはベクターグラフィックソフトが必要で、私はAffinity Designerというソフトを愛用しています。他にも有料ではAdobe Illustrator、オープンソースではInkscapeなどが有名です。

キャラクターを動くパーツ単位に分解して清書しています。左向き、右向きで絵が変わる場合は左右両方のパーツを作成、また、ボディ部は前面部と枠線部に分解し、足のパーツを挟み込むことで繋がって見えるように工夫しました。

テレッドパーツ

これらのパーツを組み合わせることで色々なポーズをとることが出来ます。なお、パーツの組み合わせはScratch上で後ほど行います。

テレッドサンプル

Affinity Designerを利用されている方はこのリンクからファイルをダウンロードしてご利用できます。ライセンスはCC BY 4.0で公開しています。

素材の書き出し

Affinity Designerでは画像の書き出しは書き出しペルソナから行います。

書き出しペルソナの選択

書き出しペルソナで各々の体のパーツをファイルに出力できるよう、レイヤータブを選択してスライスを作成します。

スライスの作成

スライスを作成後、スライスタブを選択し、各々のスライスの書き出し設定をsvgに変更して書き出します。svg形式はScratch上でサイズ変更しても画像が荒くならないので少し面倒ですがおすすめの形式です。詳しくは Wikipediaを参照ください。

スライスの作成

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- 以下のwidth="100%" height="100%"を削除 -->
<svg width="100%" height="100%" viewBox="0 0 119 136" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ... >