diff --git a/src/sprites/rendered-target.js b/src/sprites/rendered-target.js
index 12a51f2abcb..018f7cd16bb 100644
--- a/src/sprites/rendered-target.js
+++ b/src/sprites/rendered-target.js
@@ -274,9 +274,7 @@ class RenderedTarget extends Target {
             this.x = position[0];
             this.y = position[1];
 
-            this.renderer.updateDrawableProperties(this.drawableID, {
-                position: position
-            });
+            this.renderer.updateDrawablePosition(this.drawableID, position);
             if (this.visible) {
                 this.emit(RenderedTarget.EVENT_TARGET_VISUAL_CHANGE, this);
                 this.runtime.requestRedraw();
@@ -323,11 +321,8 @@ class RenderedTarget extends Target {
         // Keep direction between -179 and +180.
         this.direction = MathUtil.wrapClamp(direction, -179, 180);
         if (this.renderer) {
-            const renderedDirectionScale = this._getRenderedDirectionAndScale();
-            this.renderer.updateDrawableProperties(this.drawableID, {
-                direction: renderedDirectionScale.direction,
-                scale: renderedDirectionScale.scale
-            });
+            const {direction: renderedDirection, scale} = this._getRenderedDirectionAndScale();
+            this.renderer.updateDrawableDirectionScale(this.drawableID, renderedDirection, scale);
             if (this.visible) {
                 this.emit(RenderedTarget.EVENT_TARGET_VISUAL_CHANGE, this);
                 this.runtime.requestRedraw();
@@ -373,9 +368,7 @@ class RenderedTarget extends Target {
         }
         this.visible = !!visible;
         if (this.renderer) {
-            this.renderer.updateDrawableProperties(this.drawableID, {
-                visible: this.visible
-            });
+            this.renderer.updateDrawableVisible(this.drawableID, this.visible);
             if (this.visible) {
                 this.emit(RenderedTarget.EVENT_TARGET_VISUAL_CHANGE, this);
                 this.runtime.requestRedraw();
@@ -404,11 +397,8 @@ class RenderedTarget extends Target {
                 (1.5 * this.runtime.constructor.STAGE_HEIGHT) / origH
             );
             this.size = MathUtil.clamp(size / 100, minScale, maxScale) * 100;
-            const renderedDirectionScale = this._getRenderedDirectionAndScale();
-            this.renderer.updateDrawableProperties(this.drawableID, {
-                direction: renderedDirectionScale.direction,
-                scale: renderedDirectionScale.scale
-            });
+            const {direction, scale} = this._getRenderedDirectionAndScale();
+            this.renderer.updateDrawableDirectionScale(this.drawableID, direction, scale);
             if (this.visible) {
                 this.emit(RenderedTarget.EVENT_TARGET_VISUAL_CHANGE, this);
                 this.runtime.requestRedraw();
@@ -426,9 +416,7 @@ class RenderedTarget extends Target {
         if (!this.effects.hasOwnProperty(effectName)) return;
         this.effects[effectName] = value;
         if (this.renderer) {
-            const props = {};
-            props[effectName] = this.effects[effectName];
-            this.renderer.updateDrawableProperties(this.drawableID, props);
+            this.renderer.updateDrawableEffect(this.drawableID, effectName, value);
             if (this.visible) {
                 this.emit(RenderedTarget.EVENT_TARGET_VISUAL_CHANGE, this);
                 this.runtime.requestRedraw();
@@ -445,7 +433,10 @@ class RenderedTarget extends Target {
             this.effects[effectName] = 0;
         }
         if (this.renderer) {
-            this.renderer.updateDrawableProperties(this.drawableID, this.effects);
+            for (const effectName in this.effects) {
+                if (!this.effects.hasOwnProperty(effectName)) continue;
+                this.renderer.updateDrawableEffect(this.drawableID, effectName, 0);
+            }
             if (this.visible) {
                 this.emit(RenderedTarget.EVENT_TARGET_VISUAL_CHANGE, this);
                 this.runtime.requestRedraw();
@@ -467,21 +458,20 @@ class RenderedTarget extends Target {
         );
         if (this.renderer) {
             const costume = this.getCostumes()[this.currentCostume];
-            const drawableProperties = {
-                skinId: costume.skinId,
-                costumeResolution: costume.bitmapResolution
-            };
             if (
                 typeof costume.rotationCenterX !== 'undefined' &&
                 typeof costume.rotationCenterY !== 'undefined'
             ) {
                 const scale = costume.bitmapResolution || 2;
-                drawableProperties.rotationCenter = [
+                const rotationCenter = [
                     costume.rotationCenterX / scale,
                     costume.rotationCenterY / scale
                 ];
+                this.renderer.updateDrawableSkinIdRotationCenter(this.drawableID, costume.skinId, rotationCenter);
+            } else {
+                this.renderer.updateDrawableSkinId(this.drawableID, costume.skinId);
             }
-            this.renderer.updateDrawableProperties(this.drawableID, drawableProperties);
+
             if (this.visible) {
                 this.emit(RenderedTarget.EVENT_TARGET_VISUAL_CHANGE, this);
                 this.runtime.requestRedraw();
@@ -618,11 +608,8 @@ class RenderedTarget extends Target {
             this.rotationStyle = RenderedTarget.ROTATION_STYLE_LEFT_RIGHT;
         }
         if (this.renderer) {
-            const renderedDirectionScale = this._getRenderedDirectionAndScale();
-            this.renderer.updateDrawableProperties(this.drawableID, {
-                direction: renderedDirectionScale.direction,
-                scale: renderedDirectionScale.scale
-            });
+            const {direction, scale} = this._getRenderedDirectionAndScale();
+            this.renderer.updateDrawableDirectionScale(this.drawableID, direction, scale);
             if (this.visible) {
                 this.emit(RenderedTarget.EVENT_TARGET_VISUAL_CHANGE, this);
                 this.runtime.requestRedraw();
@@ -716,27 +703,23 @@ class RenderedTarget extends Target {
      */
     updateAllDrawableProperties () {
         if (this.renderer) {
-            const renderedDirectionScale = this._getRenderedDirectionAndScale();
+            const {direction, scale} = this._getRenderedDirectionAndScale();
+            this.renderer.updateDrawablePosition(this.drawableID, [this.x, this.y]);
+            this.renderer.updateDrawableDirectionScale(this.drawableID, direction, scale);
+            this.renderer.updateDrawableVisible(this.drawableID, this.visible);
+
             const costume = this.getCostumes()[this.currentCostume];
             const bitmapResolution = costume.bitmapResolution || 2;
-            const props = {
-                position: [this.x, this.y],
-                direction: renderedDirectionScale.direction,
-                draggable: this.draggable,
-                scale: renderedDirectionScale.scale,
-                visible: this.visible,
-                skinId: costume.skinId,
-                costumeResolution: bitmapResolution,
-                rotationCenter: [
-                    costume.rotationCenterX / bitmapResolution,
-                    costume.rotationCenterY / bitmapResolution
-                ]
-            };
+            this.renderer.updateDrawableSkinIdRotationCenter(this.drawableID, costume.skinId, [
+                costume.rotationCenterX / bitmapResolution,
+                costume.rotationCenterY / bitmapResolution
+            ]);
+
             for (const effectName in this.effects) {
                 if (!this.effects.hasOwnProperty(effectName)) continue;
-                props[effectName] = this.effects[effectName];
+                this.renderer.updateDrawableEffect(this.drawableID, effectName, this.effects[effectName]);
             }
-            this.renderer.updateDrawableProperties(this.drawableID, props);
+
             if (this.visible) {
                 this.emit(RenderedTarget.EVENT_TARGET_VISUAL_CHANGE, this);
                 this.runtime.requestRedraw();
diff --git a/test/fixtures/fake-renderer.js b/test/fixtures/fake-renderer.js
index 37cce0a5340..73b37ede6e8 100644
--- a/test/fixtures/fake-renderer.js
+++ b/test/fixtures/fake-renderer.js
@@ -14,12 +14,28 @@ FakeRenderer.prototype.getFencedPositionOfDrawable = function (d, p) { // eslint
     return [p[0], p[1]];
 };
 
+FakeRenderer.prototype.updateDrawableSkinId = function (d, skinId) { // eslint-disable-line no-unused-vars
+};
+
+FakeRenderer.prototype.updateDrawableSkinIdRotationCenter =
+    function (d, skinId, rotationCenter) {}; // eslint-disable-line no-unused-vars
+
+FakeRenderer.prototype.updateDrawablePosition = function (d, position) { // eslint-disable-line no-unused-vars
+    this.x = position[0];
+    this.y = position[1];
+};
+
+FakeRenderer.prototype.updateDrawableDirectionScale =
+    function (d, direction, scale) {}; // eslint-disable-line no-unused-vars
+
+FakeRenderer.prototype.updateDrawableVisible = function (d, visible) { // eslint-disable-line no-unused-vars
+};
+
+FakeRenderer.prototype.updateDrawableEffect = function (d, effectName, value) { // eslint-disable-line no-unused-vars
+};
+
 FakeRenderer.prototype.updateDrawableProperties = function (d, p) { // eslint-disable-line no-unused-vars
-    if (p.position) {
-        this.x = p.position[0];
-        this.y = p.position[1];
-    }
-    return true;
+    throw new Error('updateDrawableProperties is deprecated');
 };
 
 FakeRenderer.prototype.getCurrentSkinSize = function (d) { // eslint-disable-line no-unused-vars