[編集モード] 簡易ドット絵エディタ

ドット絵を描くツール。マイナビニュースに解説書きました。

プログラム: (→大) (→textarea)

#-------------------------------------------------------------------
# ドット絵エディタ
#-------------------------------------------------------------------
# 解説記事は以下、マイナビニュースの記事を参照してください！
# [URL] https://news.mynavi.jp/article/nadeshiko-64/
#-------------------------------------------------------------------
# どんどん改造して、おしゃれでレトロなドット絵エディタ作ってみて
# ください。楽しみにしています⭐⭐⭐
#-------------------------------------------------------------------

# ドット絵エディタの初期設定
ドット列数=16 # ← ここ変えるとドット数変化します
キャンバス幅=400 # ←キャンバスの大きさ
ドット幅＝INT(キャンバス幅÷ドット列数)
マウスフラグ＝オフ
描画データ＝データ初期化処理。
オンでデータ描画。

# マウスのボタンを押した時の処理を記述
描画中キャンバスのマウス押した時には
　　X=INT(マウスX÷ドット幅)
　　Y=INT(マウスY÷ドット幅)
　　もし、描画データ[Y][X]が0ならば
　　　　描画データ[Y][X] = 1
　　違えば
　　　　描画データ[Y][X] = 0
　　ここまで。
　　オンでデータ描画。
ここまで。

●データ初期化処理とは
　　R=[]
　　Yを0から(ドット列数-1)まで繰り返す
　　　　R[Y] = []
　　　　Xを0から(ドット列数-1)まで繰り返す
　　　　　　R[Y][X] = 0
　　　　ここまで。
　　ここまで。
　　Rを戻す。
ここまで。

●(枠線フラグで)データ描画とは
　　0に線太設定。白色に塗色設定。
　　[0,0,キャンバス幅,キャンバス幅]に四角描画。
　　W2=ドット幅÷2
　　Yを0から(ドット列数-1)まで繰り返す
　　　　Xを0から(ドット列数-1)まで繰り返す
　　　　　　XX=X*ドット幅
　　　　　　YY=Y＊ドット幅
　　　　　　# 枠を描画
　　　　　　もし、枠線フラグ＝オンならば
　　　　　　　　1に線太設定。
　　　　　　　　「#F0F0F0」に線色設定。「」に塗色設定。
　　　　　　　　[XX,YY,ドット幅,ドット幅]に四角描画。
　　　　　　ここまで。
　　　　　　もし、描画データ[Y][X]=0ならば、続ける。
　　　　　　# ドットを描画
　　　　　　3に線太設定。
　　　　　　「#FFC0C0」に線色設定。
　　　　　　赤色に塗色設定。
　　　　　　[XX+W2, YY+W2]へ(W2-2)の円描画。
　　　　ここまで。
　　ここまで。
ここまで。

# 保存ボタンとクリアボタン
保存ボタン＝「保存」のボタン作成。
保存ボタンをクリックした時には
　　オフでデータ描画。
　　描画ダウンロード
ここまで。
クリアボタン＝「クリア」のボタン作成。
クリアボタンをクリックした時には
　　描画データ＝データ初期化処理
　　オンでデータ描画。
ここまで。
#-------------------------------------------------------------------
# ここまで
#-------------------------------------------------------------------

キャンバス: 幅 × 高

🍯 なでしこ3貯蔵庫

[編集モード] 簡易ドット絵エディタ

素材のアップロード