TypeScratcher Lessons

Appearance

Image(イメージ) ​

ローカル画像を読み込むとき ​

ローカルにあるアセットをおいてあるフォルダーを相対パスで指定してインポートしてください。

typescript
import { Typescratcher as Ts } from "@tscratch3/typescratcher";

import CatSvg from '../../assets/cat.svg'; 
const CatImage = new Ts.Image( { CatSvg } );

Imageへの渡し方

Ts.Image( { CatSvg } ) のように { 変数 } の形で渡してください。

{ }で囲むとオブジェクトになります。

{ CatSvg } は、次と同じです。
{ 'CatSvg' : CatSvgの中身 }

変数名と変数の中身を一緒に渡したいので { CatSvg }の形で渡す仕様にしています。

なお、『typeScratcherPractice』をクローンして利用する場合は、プロジェクトトップにある/assetsフォルダーを別名 @Assetsとして指定可能です。

typescript
import { Typescratcher as Ts } from "@tscratch3/typescratcher";

import CatSvg from '@Assets/cat.svg'; 
const CatImage = new Ts.Image( { CatSvg } );

クラウド画像を読み込むとき ​

アセットのURLをコンスタント値として定義し、Ts.Imageを使ってロードしてイメージの形にします。

typescript
import { Typescratcher as Ts } from "@tscratch3/typescratcher";

const Ballerina_b = 'https://cdn.assets.scratch.mit.edu/internalapi/asset/4ccb1752a43f48aafe490c9c08e58c27.svg/get';

const BallerinaBImage = new Ts.Image( { Ballerina_b } );

Scratchアセットの探し方 ​

検索サイト

https://amami-harhid.github.io/typescratcherAssets/web/


コスチュームの一覧を表示します。背景や音を探したいときはプルダウン選択を変えてください。

画像
確認したい画像をクリックすると拡大します。

画像
『Copy URL』ボタンを押すと、クリップボードにURLをコピーしますので、好きなテキストの場所に張り付けることができます。

画像