Scratch 3.0을 Hack하자. scratch-render.js에서 뭔가를 만들어 보자.

10277 단어 Scratch
Scratch3.0의 scratch-render package를 사용해 봅시다.
어떤 느낌으로 작동시킬 수 있습니까?



시도해 보자.



Scratch-Render의 기능을 읽어 보자.



scratch-render에서 RenderWebGL 사용



봐.
Entry 는 src/index.js 와 같습니다.

다음은 scratch-reader의 Entry를 참조하십시오.
htps : // 기주 b. 이 m/lK/sc등 tch-렌으로 r/bぉb/로 ゔぇぉp/src/그리고 x. js

module.exports = RenderWebGL;
라고 기재되어 있습니다.
scratch-render 에서는, RenderWebGL 를 사용하는 것을 알았습니다.

Scratch에서 사용한 기능을 찾습니다.



htps : // 기주 b. 이 m/lK/sc 등 tch-렌으로 r/bぉb/로 ゔぇぉp/src/렌으로 rぇbGL. js
의 방법을 살펴보십시오.
이것은 Scratch-Render에서 사용할 수 있는 기능입니다.

resize (pixelsWide, pixelsTall)
setBackgroundColor (red, green, blue)
setDebugCanvas (canvas)
setStageSize (xLeft, xRight, yBottom, yTop)
getNativeSize()
createBitmapSkin (bitmapData, costumeResolution, rotationCenter)
createSVGSkin (svgData, rotationCenter)
createPenSkin ()
createTextSkin (type, text, pointsLeft)
updateSVGSkin (skinId, svgData, rotationCenter)
updateTextSkin (skinId, type, text, pointsLeft)
destroySkin (skinId)
createDrawable()
destroyDrawable (drawableID)
setDrawableOrder (drawableID, order, optIsRelative, optMin)
draw ()
getSkinSize (drawableID)
isTouchingColor (drawableID, color3b, mask3b)
isTouchingDrawables (drawableID, candidateIDs)
pick (centerX, centerY, touchWidth, touchHeight, candidateIDs)
extractDrawable (drawableID, x, y)
extractColor (x, y, radius)
updateDrawableProperties (drawableID, properties)
getFencedPositionOfDrawable (drawableID, position)
penClear (penSkinID)
penPoint (penSkinID, penAttributes, x, y)
penLine (penSkinID, penAttributes, x0, y0, x1, y1)
penStamp (penSkinID, stampID)
onNativeSizeChanged (event)

이것들은 scratch-render에서 사용할 수 있는 기능입니다.
음, Scratch를 사용하는 사람이라면 익숙한 이름을 찾을 수 있습니다.

펜
Sramp 라든지

기본적인 사용법은, Sprite 를 생성해 Loop 하는 것만



Canvas에서 WebGLRender를 생성합니다.
var canvas = document.getElementById('scratch-stage');
var renderer = new ScratchRender(canvas);

WebGLRender에서 이미지 로드
renderer.createBitmapSkin()
renderer.updateDrawableProperties()

위치 정보 또는 업데이트
renderer.updateDrawableProperties(this.drawableID, {
　　position: [this.x, this.y],　scale: [20, 20],　direction: 90
});

이상을 반복한다.
function drawStep() {
   ..
   ..
    renderer.draw();
    requestAnimationFrame(drawStep);
}
drawStep();

사용해 보자.



상하 좌우 키로 이미지가 상하 좌우로 이동
앱을 만들어 보자!

project.json 만들기


mkdir scratch-render-hello
cd scratch-render-hello
npm init -f
npm install --save-dev webpack babel-core babel-loader babel-eslint babel-preset-es2015
npm install --save-dev webpack-dev-server scratch-render copy-webpack-plugin

webpack.config.js 만들기



emacs webpack.config.js
const CopyWebpackPlugin = require('copy-webpack-plugin');
const path = require('path');
const webpack = require('webpack');

const base = {
    devServer: {
        contentBase: false,
        host: '0.0.0.0',
        port: process.env.PORT || 8362
    },
    module: {
        rules: [
            {
                include: [
                    path.resolve(__dirname, 'src')
                ],
                loader: 'babel-loader',
                options: {
                    presets: ['es2015']
                }
            },
        ]
    },
    plugins: process.env.NODE_ENV === 'production' ? [
        new webpack.optimize.UglifyJsPlugin({
            include: /\.min\.js$/,
            minimize: true
        })
    ] : []
};

module.exports = [
    Object.assign({}, base, {
        target: 'web',
        entry: {
            'scratch-render-hello': './src/hello/scratch-render-hello.js'
        },
        output: {
            path: path.resolve(__dirname, 'hello'),
            filename: '[name].js'
        },
        plugins: base.plugins.concat([
            new CopyWebpackPlugin([
                {
                    from: 'src/hello'
                }
            ])
        ])
    }),
];

JavaScript와 Index.html 만들기



mkdirs src/hello
emacs src/hello/index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello, World</title>
    <style>
        #scratch-stage { width: 480px; border:3px dashed black;}
    </style>
</head>
<body style="background: lightsteelblue">
<canvas id="scratch-stage"></canvas>
<script src="scratch-render-hello.js"></script>
</body>
</html>

emacs src/hello/scratch-render-hello.js
const ScratchRender = require('scratch-render');
class Chara {
   constructor(renderer, name, imageUrl, x=0, y=0) {
       this.x = x;
       this.y = y;
       this.name;
       this.drawableID = renderer.createDrawable();
       this.updateImage(renderer, this.drawableID, imageUrl);
   }

   updateImage(renderer, drawableID, imageUrl) {
        var image = new Image();
        image.crossOrigin = 'anonymous';
        image.src = imageUrl;
        image.onload = function () {
            var skinId = renderer.createBitmapSkin(image);
            console.log(""+drawableID);
            renderer.updateDrawableProperties(drawableID, {
                skinId: skinId
            });
        };
   }
   update(renderer) {
        renderer.updateDrawableProperties(this.drawableID, {
            position: [this.x, this.y],
            scale: [20, 20],
            direction: 90
        });
   }
   onKeyDown(keyCode) {}
}

class CharaA extends Chara {
   onKeyDown(keyCode) {
        switch(keyCode) {
            case 37: // left
            this.x -=10;
            break;
            case 39: // right
            this.x +=10;
            break;
            case 38: // up
            this.y +=10;
            break;
            case 40: // down
            this.y -=10;
            break;
        }
   }
}
class CharaB extends Chara {
   onKeyDown(keyCode) {
        switch(keyCode) {
            case 72: //h
            this.x -=10;
            break;
            case 76: //l
            this.x +=10;
            break;
            case 75: //k
            this.y +=10;
            break; 
            case 74: //j
            this.y -=10;
            break;
        }
   }
}

var canvas = document.getElementById('scratch-stage');
var renderer = new ScratchRender(canvas);
var chara1 = new CharaA(renderer, "test", "icon.png", -50,0);
var chara2 = new CharaB(renderer, "test", "icon.png", 50,0);

document.onkeydown = function (ev) {
    chara1.onKeyDown(ev.keyCode);
    chara2.onKeyDown(ev.keyCode);
};


function drawStep() {
    chara1.update(renderer);
    chara2.update(renderer);
    renderer.draw();
    requestAnimationFrame(drawStep);
}
drawStep();

PS



이번 코드는 다음



이하의 장소에서도, 알레코레 써 갑니다.



Scratch3.0 자신 전용기를 만들자!!



(0)
(1) Scratch3.0을 빌드해 보자
(2) Scratch3.0을 Android 앱으로 작동합시다 (1)
(3) Scratch3.0을 Android 앱으로 작동합시다. (2)
(4) Scratch3.0을 Android 앱으로 작동합시다 (3)
(5) Webpack이란?
(6) Scratch3.0의 package.json을 읽어 보자.
(7) scratch-gui를 설치해 봅시다.
(8) scratch-vm에 사용되는 scratch-xxx를 만져 보자.
(9) Babel을 만져 보자.
(10) scratch-render.js에서 무언가를 만들어 만져 보자.

Scratch2.0 입문





불의 형태 With Scratch 2.0 (프로그램 입문) 00권
불의 형태 With Scratch 2.0 (프로그램 입문) 01권
화염 유형 With Scratch 2.0 (게임 프로그램 시작)
Scratch 3.0을 Hack하자. Babel을 만져 보자.
Scratch 3.0을 Hack하자. scratch-storage.js를 터치합시다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage