Using Drawscript and Adobe Creative Cloud to Generate Graphics Code
There are many times you need to draw or generate vector based graphics in your applications and games. Each different language has different drawing APIs. It would be great if you could take the drawings from Adobe Illustrator, a vector based drawing tool that is part of the Adobe Creative Cloud, and generate the code instead of coding it by hand.
Granted SVG does help with expressing vector graphics and Adobe Creative Cloud has great SVG support. But there are various reasons that you might want your graphics to be in native graphic draw calls.
This is where Drawscript comes into play. It is a beta plugin for Illustrator. The Drawscript plugin for Adobe Creative Cloud is a beta first release but has a lot of promise. With it, you can select a vector graphic and output it to Objective-C, C++ OpenFrameworks, JavaScript Canvas, ActionScript 3, Processing, JSON, or raw bezier data points.
Here is what the plugin looks like in Illustrator:
I also created a video showing how it works exporting to ActionScript 3 and JavaScript Canvas.
Here is the JavaScript Canvas code used in the video above:
<head>
<script>
function draw() {
var ctx = document.getElementById('myCanvas').getContext('2d');
ctx.fillStyle="rgb(27,255,29)";
ctx.lineStyle="rgb(0,0,0)";
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(59,70);
ctx.bezierCurveTo(58,71,58,71,57,72);
ctx.bezierCurveTo(56,73,55,72,53,72);
ctx.bezierCurveTo(52,72,51,73,50,72);
ctx.bezierCurveTo(47,71,45,66,41,67);
ctx.bezierCurveTo(36,67,39,74,32,71);
ctx.bezierCurveTo(28,69,29,63,27,62);
ctx.bezierCurveTo(26,62,25,62,24,62);
ctx.bezierCurveTo(18,61,19,60,18,55);
ctx.bezierCurveTo(18,54,17,54,16,54);
ctx.bezierCurveTo(14,54,13,52,13,50);
ctx.bezierCurveTo(13,47,14,45,15,42);
ctx.bezierCurveTo(15,41,15,40,14,40);
ctx.bezierCurveTo(12,36,10,35,12,31);
ctx.bezierCurveTo(12,30,14,30,14,29);
ctx.bezierCurveTo(14,26,13,23,17,21);
ctx.lineTo(17,21);
ctx.bezierCurveTo(18,21,18,21,18,21);
ctx.bezierCurveTo(18,20,18,19,19,18);
ctx.bezierCurveTo(20,14,26,14,29,14);
ctx.bezierCurveTo(31,14,32,8,38,10);
ctx.bezierCurveTo(39,11,40,12,41,13);
ctx.bezierCurveTo(48,15,47,10,58,17);
ctx.bezierCurveTo(59,17,61,18,62,18);
ctx.bezierCurveTo(67,20,66,27,66,32);
ctx.bezierCurveTo(66,34,68,37,68,40);
ctx.bezierCurveTo(68,41,67,42,67,43);
ctx.bezierCurveTo(68,44,68,45,68,46);
ctx.bezierCurveTo(67,52,62,75,52,72);
ctx.lineTo(52,72);
ctx.lineTo(53,72);
ctx.lineTo(53,72);
ctx.bezierCurveTo(54,73,55,73,56,72);
ctx.bezierCurveTo(57,72,58,71,59,70);
ctx.fill();
ctx.stroke();
ctx.fillStyle="rgb(212,148,0)";
ctx.lineStyle="rgb(0,0,0)";
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(10,30);
ctx.bezierCurveTo(10,24,20,19,33,19);
ctx.bezierCurveTo(46,19,35,26,35,32);
ctx.bezierCurveTo(35,38,46,42,33,42);
ctx.bezierCurveTo(20,42,10,37,10,30);
ctx.fill();
ctx.stroke();
ctx.fillStyle="rgb(238,211,135)";
ctx.lineStyle="rgb(32,32,47)";
ctx.lineWidth=2;
ctx.beginPath();
ctx.moveTo(51,32);
ctx.bezierCurveTo(51,29,47,28,53,28);
ctx.bezierCurveTo(59,28,58,29,58,32);
ctx.bezierCurveTo(58,35,56,35,53,35);
ctx.bezierCurveTo(50,35,51,35,51,32);
ctx.fill();
ctx.stroke();
}
</script>
</head>
<body onload="draw()">
<canvas id="myCanvas" width="480" height="480">
<p>This browser doesn't support canvas.</p>
</canvas>
</body>
</html>
Here is the ActionScript 3 code used in the video above:
{
import flash.display.Graphics;
import flash.display.Sprite;
public class DrawscriptTest2 extends Sprite
{
public function DrawscriptTest2()
{
super();
var g:Graphics = this.graphics;
g.beginFill(1834781,1);
g.lineStyle(2,0);
g.moveTo(59,70);
g.cubicCurveTo(58,71,58,71,57,72);
g.cubicCurveTo(56,73,55,72,53,72);
g.cubicCurveTo(52,72,51,73,50,72);
g.cubicCurveTo(47,71,45,66,41,67);
g.cubicCurveTo(36,67,39,74,32,71);
g.cubicCurveTo(28,69,29,63,27,62);
g.cubicCurveTo(26,62,25,62,24,62);
g.cubicCurveTo(18,61,19,60,18,55);
g.cubicCurveTo(18,54,17,54,16,54);
g.cubicCurveTo(14,54,13,52,13,50);
g.cubicCurveTo(13,47,14,45,15,42);
g.cubicCurveTo(15,41,15,40,14,40);
g.cubicCurveTo(12,36,10,35,12,31);
g.cubicCurveTo(12,30,14,30,14,29);
g.cubicCurveTo(14,26,13,23,17,21);
g.lineTo(17,21);
g.cubicCurveTo(18,21,18,21,18,21);
g.cubicCurveTo(18,20,18,19,19,18);
g.cubicCurveTo(20,14,26,14,29,14);
g.cubicCurveTo(31,14,32,8,38,10);
g.cubicCurveTo(39,11,40,12,41,13);
g.cubicCurveTo(48,15,47,10,58,17);
g.cubicCurveTo(59,17,61,18,62,18);
g.cubicCurveTo(67,20,66,27,66,32);
g.cubicCurveTo(66,34,68,37,68,40);
g.cubicCurveTo(68,41,67,42,67,43);
g.cubicCurveTo(68,44,68,45,68,46);
g.cubicCurveTo(67,52,62,75,52,72);
g.lineTo(52,72);
g.lineTo(53,72);
g.lineTo(53,72);
g.cubicCurveTo(54,73,55,73,56,72);
g.cubicCurveTo(57,72,58,71,59,70);
g.endFill();
g.beginFill(13931520,1);
g.lineStyle(2,0);
g.moveTo(10,30);
g.cubicCurveTo(10,24,20,19,33,19);
g.cubicCurveTo(46,19,35,26,35,32);
g.cubicCurveTo(35,38,46,42,33,42);
g.cubicCurveTo(20,42,10,37,10,30);
g.endFill();
g.beginFill(15651719,1);
g.lineStyle(2,2105391);
g.moveTo(51,32);
g.cubicCurveTo(51,29,47,28,53,28);
g.cubicCurveTo(59,28,58,29,58,32);
g.cubicCurveTo(58,35,56,35,53,35);
g.cubicCurveTo(50,35,51,35,51,32);
g.endFill();
}
}
}
Pingback: John Nack on Adobe : Drawscript turns Illustrator shapes into code