Journal

[Old Tut] Create SWF Import for Kisekae 2

Use this template, it is much quicker, and a lot less buggy, feel free to reference this, but what I say in that template trumps this now.Note: I am NOT an expert at this, I just figured I would share with the community what I have been able to do, push the limits of what is and isnt Kisekae, and note where the bind spots in this process to improve the process for anyone/everyone.Note2: This Mega-Guide will probably end up chopped and served individually for ease of reading later. Pair this with other tutorials on how to use respective programs for maximum reward. I don't know everything, I just do things. Possible FAQ: Q: Why import images into Kisekae? Pochi has made accessories and hair in numerous combinations, surely you could just make something with accessories? A: Other than the obvious less parts and space saving benefits, there are actually anchors (head, arms, upper/breast, hair-clip, etc.) that are only available to character-bound imports. Making anything custom on a characters arm, held in hand, or behind the back are easier done with imports. With less adjustments per pose. Boots, from my experience are a cool implementation, but knee-highs need too many parts to be potable.Q: Why pick a vector format like SVG, and not PNG, JPG, etc. I can create in paint.A: Vector Art has one primary advantage, scalability, SWF files and the source SVGs can be measured in pixels when crafted, but they are vector drawing instructions, rather than raster pixel information. This allows it to be sampled at any size and look rather good. For example, a SWF would beat a PNG when given the same size and then upscaled to 150 percent. SWFS also are what drives Kisekae, leading to greater consistency with the art style. Q: My browser says SWF files could be potentially dangerous? Will this give me a virus? A: Trick question, yes and no. Only download SWF files from sources you trust, I oftentimes submit a source zip with the instructions to use and the source SWF so that you can just follow the tutorial and import yourselves. Ive used the same SWF for nearly all my exports so far, one layer, one static animation. If you just want to import an SVG into Kisekae just follow form 2b on.Note : Method 2 TrappingsThis is what I would like to call a bad import day.Some SVG file features don't transition over while importing as SVG into FFDEC, if you use shapes such as circle, fill with the fill tool, then delete circle created. otherwise you'll end up with this.The line going off with the right is commonly associated with failed circles, but this time I am clueless, Inkscape has left some garbage in the export, which can be remedied with making a new document and moving the objects into it. (just beware, I encountered note 2 this way) Lastly, I would suggest importing the SVG at different points to ensure compatibility and fix whenever possible.Also, if you use layers, try deleting the paths within the layers, to prevent the left's extra "Ghost" Objects. (still trying to find the infinite line bug here.Note 2: Scale & Stroke Modifiers and Inconsistencies (may update if progress made)Edit-2019/09/18 The Stroke size seems to be tied to object size in most cases,SVG Scaling when importing/exporting between FFDEC and Inkscape is strange, for example after exporting Kisekae 2s shield handheld item from k_kisekae2.swf into an SVG, the dimensions came out to be 168px x 168px, making a new document on Inkscape with that and the result is one-fifth/one tenth the size. In addition, the width of stroke can become inconsistent when Importing using FFDEC, cant tell why but it happens on some shapes. See pictue belowETools needed: Method 1Vectorian giotto. Home page is gonebut I found it at download.cnet.com . use at your own risk. Method 2 Inkscape , or another vector editor like Adobe Illustrator. JPEXS Free Flash Decompiler , FFDEC for short. SVG importer/Exporter and more Highly reccomended:Directory Opus, a file explorer for ~$20USD (prices in Aussie Dollars) Lets you simply copy/paste full pathnames into kisekae, batch rename saved txt exports, convert posted images from xxx.png to folder.jpg. I got mine for a steal during humble bundle ages ago. (As of writing this I am not getting paid from Dopus and will not in the future) Method 1: Creating a base SWF for import/Working in Vectorian GiottoThis process saves as .vgd source projects, exports to swf. Vectorian Giotto is a free program for creating SWF animations. The vector editing in the app is rather slow, so Id only advise it for simple shapes, or if you already know what you are doing. After booting you are greeted with a splash screen and the above.From here you can edit the document properties with Ctrl+J, then edit the size and shape of the document. Note that to Kisekae, (0,0) is the center-point for scaling and rotating. ( I picked 256x256 for the example)Draw a circle with the circle toolPress Ctrl+Shift+S to save documentsThat's basically it, creating more complex shapes may come in a separate tutorial (IE if I end up using it for animated SWF files in the future, and leave tips.TIPS: Either ctrl or alt clicking any splines will create an additional point on the spline.Double clicking on shapes brings you deeper into the shape editor from the movie editor, name layers accordingly and pay attention to where u r.Cryengine has an okay tutorial on creating buttons, which includes some bare minimum, just notice that flashdevelop may or may not be able to inject action-script anymore (a shame, really) Method 2a: Creating an SVG in InkscapeUsing this method saves as Inkscape SVGs, and exports to either Inscape SVG or Plain (unlayered) SVG. (you can import both into FFDEC.Inskape is the primary tool that I use while creating SWF Imports, as it has more advanced features compared to Giotto, some, like mirroring will come up later in tutorial.Possible Bug/Bad Feature: Inkscape has a mind of it's own when it comes to window placement, on Windows, multiple monitors, when in doubt Ctrl+W to close and reopen, then find waldo. Creating a simple heart in InkscapeWhen you first open Inkscape, you will get a screen like this. From there you want to go to File>Document Properties (Ctrl+Shift+D) and find the window,I would suggest changing the "Display Units" under General and "Units" under Custom Size to px. since I will be referencing everything in px of width. Under Scale you can change the units per px of the document, I would suggest something like .25, .2, .1 or being 1/4, 1/5 and 1/10 a pixel respectively. This allows for finer movement when shifting points using the arrow keys.Create a 512x512px doc with 1.0 (not .25, as I have) scale. (19/09/18 If the swf is too small, increase this later, hit transform [Ctrl+Shift+M] scale by the multiplier applied to scale valure {.25 to 1 would be 4 so 400% scale.}Then create three different guides by dragging on the vertical ruler, then double clicking the line created. Set the X values to 64, 256, and 448. Set the line at 256 to Y 384 above. Like this:Draw a right triangle with the Bezier Curve Tool (Shift+F6)Switch to the "Edit paths..." tool (F2) and pull at the top of the triangle.Pull the angular portion outwards and to the left, then once again inwards lower downIf you want a nice, seamless point you can hit the little square button on the top toolbar to round the edges.[4]With that, you now have your basic shape, now all that's left is to duplicate it. (You will need to first press the black cursor circled red and in the middle diagram.Fill the heart by pressing one of the colors at the bottom of the main window (pres shift for line color) [Left]. Copy and paste the shape you made.Mirror the shape verically with the two triangles button.Move the shape into place. (it should snap to the original)Select both and hit, Path>Union (Ctrl++) joining the shape.Save the document, SVG should be the default format.Method 2b: Importing a SVG file into FFDECNow, the moment you have all been waiting for, to import your image into the swf file. Simply open FFDEC and import an SWF. I am using the one from Method 1 as a base. (remeber the note I made about scale, yeah, that circle is HUGE.)Now navigate the menu till you get to the Defineshape4 object and replace - update bounds, unless you want the object to be the same size.Navigate to your SVG file, press OK at the warning. Then save the SWF file as, say heart.swfMethod 2b-alt: Advanced Users? (Expect moral grays here, be a good sport and pay Pochi, his engine is awesome, and I don't want to create strife for the guy). FFDEC is a flash compiler and decomplier and I already talked about exporting source swfs to use as a template for scaling. You CAN do this with Pochi's "Bonus Items" that come with recolor/variant codes when you pay for using Pochi's Enty Importing shapes works with those SWF's too, just replace the applicable parts, and use the code that you got for paying for the "bonus item"Distributing these unlock codes would be highly unethical, so I would urge anyone that makes an export using Pochi's code as a base direct the user to Pochi's Enty.I would also suggest making such imports under scraps, or packaged as a bonus in a zip. Using your SWF in KisekaeThis step is greatly simplified based on what file explorer you have and if you can copy the full pathname/localurl of your files quickly easily or not. I will write this tutorial for windows explorer, however I perfer Directory Opus as stated on reccomended tools. Right click your swf file, and select properties. Hilight the entire location like text and right-click copy the textFor this example you would get something like this, it leads to my accessories workspace.D:\Games\Kisekae\Accessories\Workspaceadd a "\filename.swf" to that, in this case "\heart.swf"D:\Games\Kisekae\Accessories\Workspace\Heart.swfLastly Paste the URL in Kisekae under the Character-bound Image tab. (or the Scene-bound image tab if that's how you roll.)That's all I have for now, feel free to comment if you have anything to add/correct.