User prompt
When pressing the palette asset, it changes colors from red, orange, yellow, green, blue, violet, and gray.
User prompt
Palette assets should be shown in the bottom of the Pixel asset
User prompt
Show palette 1, palette 2, palette 3, palette 4, palette 5, palette 6, and palette 7 to the game class
User prompt
Delete I'd palette
User prompt
Show all palette assets
User prompt
Add 7 assets for pallets
User prompt
Dragging added in Pixel asset
User prompt
Dragging when drawing
User prompt
Fix Bug: 'ReferenceError: currentColor is not defined' in this line: 'self.setColor(currentColor);' Line Number: 10
Initial prompt
Draw a Pixel Art
var currentColor = 0x000000; var Pixel = Container.expand(function () { var self = Container.call(this); var pixelGraphics = self.createAsset('pixel', 'Pixel Graphics', .5, .5); self.color = 0x000000; self.setColor = function (color) { self.color = color; pixelGraphics.tint = color; }; self.isDragging = false; self.on('down', function (obj) { self.setColor(currentColor); self.isDragging = true; }); self.on('up', function (obj) { self.isDragging = false; }); self.on('move', function (obj) { if (self.isDragging) { self.setColor(currentColor); } }); stage.on('move', function (obj) { if (self.isDragging) { self.setColor(currentColor); } }); stage.on('up', function (obj) { self.isDragging = false; }); }); var Palette = Container.expand(function () { var self = Container.call(this); self.paletteGraphics = []; for (var i = 1; i <= 7; i++) { var paletteGraphic = self.createAsset('palette' + i, 'Palette Graphics ' + i, .5, .5); self.paletteGraphics.push(paletteGraphic); } self.colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF, 0xFFFFFF, 0x000000]; self.on('down', function (obj) { var pos = obj.event.getLocalPosition(self); var index = Math.floor(pos.x / (self.width / self.colors.length)); currentColor = self.colors[index]; }); }); var Game = Container.expand(function () { var self = Container.call(this); var pixels = []; var palette = self.addChild(new Palette()); palette.x = 2048 / 2; palette.y = 2732 - palette.height / 2; var gridSize = 50; var pixelSize = 2048 / gridSize; for (var i = 0; i < gridSize; i++) { for (var j = 0; j < gridSize; j++) { var pixel = self.addChild(new Pixel()); pixel.x = i * pixelSize + pixelSize / 2; pixel.y = j * pixelSize + pixelSize / 2; pixels.push(pixel); } } LK.on('tick', function () { pixels.forEach(function (pixel) { if (pixel.isDragging) { pixel.setColor(currentColor); } }); }); });
===================================================================
--- original.js
+++ change.js
@@ -30,15 +30,13 @@
});
});
var Palette = Container.expand(function () {
var self = Container.call(this);
- var paletteGraphics1 = self.createAsset('palette1', 'Palette Graphics 1', .5, .5);
- var paletteGraphics2 = self.createAsset('palette2', 'Palette Graphics 2', .5, .5);
- var paletteGraphics3 = self.createAsset('palette3', 'Palette Graphics 3', .5, .5);
- var paletteGraphics4 = self.createAsset('palette4', 'Palette Graphics 4', .5, .5);
- var paletteGraphics5 = self.createAsset('palette5', 'Palette Graphics 5', .5, .5);
- var paletteGraphics6 = self.createAsset('palette6', 'Palette Graphics 6', .5, .5);
- var paletteGraphics7 = self.createAsset('palette7', 'Palette Graphics 7', .5, .5);
+ self.paletteGraphics = [];
+ for (var i = 1; i <= 7; i++) {
+ var paletteGraphic = self.createAsset('palette' + i, 'Palette Graphics ' + i, .5, .5);
+ self.paletteGraphics.push(paletteGraphic);
+ }
self.colors = [0xFF0000, 0x00FF00, 0x0000FF, 0xFFFF00, 0xFF00FF, 0x00FFFF, 0xFFFFFF, 0x000000];
self.on('down', function (obj) {
var pos = obj.event.getLocalPosition(self);
var index = Math.floor(pos.x / (self.width / self.colors.length));