テクスチャをいちいち並べるのが面倒だから勝手に並べられるようにした話

成行

Minecraftの新Mod Modes-fiのプロジェクトを立ち上げるために先行していくつか単純なリピートテクスチャを書いていた。

しかし、いちいちGimpでコピペして並べるのは見づらいし、閉じると消えてしまう・・・

ので作る

はい、やります

$ npx create-nuxt-app 好きな名前

後は質問に答えます。多分何でもいいです。ビルドすることはないと思うので。

インストール後筆者の環境だとsassが動かないので以下のコマンドを入力

$ npm install node-sass@5.0.0 --save-dev
$ npm install sass-loader@10.1.1 --save-dev

これで完了

後はindex.vueとSCSSを記述

index.vue

<template>
  <main>
    <div id="box">
      <div v-for="i in 100" :key="i" class="box" />
    </div>
  </main>
</template>

<script lang="ts">
import Vue from 'vue'
export default Vue.extend({})
</script>

<style lang="scss" src=".\checker.scss" />

checker.scss

#box{
    max-width: 1400px;
    margin: 0 auto;
    .box{
        display:inline-block;
        width: 128px;//テクスチャサイズに合わせて調整するとよい
        height: 128px;//テクスチャサイズに合わせて調整するとよい
    }
}

@for $i from 1 to 100{
    #box div:nth-child(#{$i}){
        background-image: url("/textures/#{$i}.png");
    }
}

以上です。

最後に起動してlocalhost:3000にアクセス

$npm run dev

仕組みとしてはv-forで100個divを作ってscssのfor文で100個分画像を割り当てています。そのため、0.png~任意の整数.pngというファイル名でないと認識しません。

できたものがこちらになります。画像はstatic/texturesディレクトリ(なければ作成)して放り込んでください。お疲れさまでした。

ソースはこちら

そのうちやりたいこと

• ドラッグアンドドロップで開く
• もうちょっと見た目良くしたい