diff --git a/packages/graphics/packets/trait-update-visible.packet.js b/packages/graphics/packets/trait-update-visible.packet.js
new file mode 100644
index 0000000..3057ebc
--- /dev/null
+++ b/packages/graphics/packets/trait-update-visible.packet.js
@@ -0,0 +1,27 @@
+import {Packet} from '@avocado/net';
+
+export class TraitUpdateVisiblePacket extends Packet {
+
+  static pack(packet) {
+    const data = packet.data[1];
+    data.opacity = Math.floor(data.opacity * 255);
+    return super.pack(packet);
+  }
+
+  static get schema() {
+    return {
+      ...super.schema,
+      data: {
+        isVisible: 'bool',
+        opacity: 'uint8',
+      },
+    };
+  }
+
+  static unpack(packet) {
+    const data = super.unpack(packet);
+    data.opacity = data.opacity / 255;
+    return data;
+  }
+
+}
diff --git a/packages/graphics/packets/trait-visible.packet.js b/packages/graphics/packets/trait-visible.packet.js
deleted file mode 100644
index a4d8b03..0000000
--- a/packages/graphics/packets/trait-visible.packet.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import {Packet} from '@avocado/net';
-
-export class TraitVisiblePacket extends Packet {
-
-  static get schema() {
-    const schema = super.schema;
-    schema.data.isVisible = 'bool';
-    schema.data.opacity = 'uint8';
-    return schema;
-  }
-
-}
diff --git a/packages/graphics/traits/visible.trait.js b/packages/graphics/traits/visible.trait.js
index c1b766c..e2a6771 100644
--- a/packages/graphics/traits/visible.trait.js
+++ b/packages/graphics/traits/visible.trait.js
@@ -6,7 +6,9 @@ import {Rectangle, Vector} from '@avocado/math';
 
 import {Container} from '../container';
 import {hasGraphics} from '../has-graphics';
-import {TraitVisiblePacket} from '../packets/trait-visible.packet';
+import {
+  TraitUpdateVisiblePacket,
+} from '../packets/trait-update-visible.packet';
 
 const AUTO_ZINDEX = 1 << 16;
 
@@ -72,7 +74,7 @@ export class Visible extends decorate(Trait) {
   }
 
   acceptPacket(packet) {
-    if (packet instanceof TraitVisiblePacket) {
+    if (packet instanceof TraitUpdatedVisiblePacket) {
       this.entity.isVisible = packet.data.isVisible;
       this.entity.opacity = packet.data.opacity / 255;
     }
@@ -92,15 +94,10 @@ export class Visible extends decorate(Trait) {
   }
 
   packetsForUpdate() {
-    const packets = [];
-    if (this.isDirty) {
-      packets.push(new TraitVisiblePacket({
-        isVisible: this.entity.isVisible,
-        opacity: Math.floor(this.entity.opacity * 255),
-      }, this.entity));
-      this.makeClean();
+    const {isVisible, opacity} = this.stateDifferences();
+    if (isVisible || opacity) {
+      return new TraitUpdateVisiblePacket(this.state);
     }
-    return packets;
   }
 
   get rawVisibleScale() {