Tag: image editor

GameMaker Studio 2 impressions: importing from GMS1.4

YoYoGames announced a game jam to celebrate the GMS2 Beta a couple weeks ago, and I’ve decided to try to participate. I don’t have a lot of time to work on my project, but I wanted to do something to warm up for Ludum Dare 37 anyway, so this was just the excuse I needed.

Since I’m short on time, and am very interested to see how well the GMS1.4->2.0 import feature is, I decided to work on an update to my LD35 entry, Shape Struggle.

Import and Compatibility Report

First, I made a copy of my source code. Then I imported it into GMS2, which was easy. A few seconds later, the project had been converted.

Immediately, GMS2 presented me with a Compatibility Report which details all the conversions it had to make, and the report itself appears as a file in my project resource tree under Notes.

Mostly, the conversion report details involves replacing calls to obsolete functions with compatibility scripts that do the equivalent thing. In my case, the game converted nicely, and I was able to build and run it without any problems. But, I expect that if the conversion process ran into problems, perhaps a function call that it could not convert to GMS2, the Compatibility Report would make mention of this, and I might have some additional work to do before the project would run.

YYG’s documentation says that the compatibility scripts should NOT be messed with, they are not intended to be human editable, so I haven’t tried messing around with them, but it leaves me curious about what might happen if I did. Not being able to go into these functions and make changes makes me question how maintainable an imported project is; and if it is not very maintainable, it mostly defeats the purpose of importing and converting an old project.

I haven’t done enough yet to know whether this is a legitimate concern or not, but it’s a worry for now until I know more. It seems to me that in order to have complete control over your project code, you’ll eventually need to go through and re-write any code that makes calls to compatibility scripts, to do the equivalent thing in a manner which is completely native to the way GMS2 wants things done. In many cases, this could be a simple and straightforward transliteration of the old code into new code which eliminates deprecated functions. Depending on the project size, though, this could get very tedious.

Update: Reading the Help documentation more carefully, I misread. Only compatibility scripts starting with a double underscore should be left alone. From looking at the compatibility scripts that I have reviewed so far, it seems like a fairly straightforward wrapping — the old, deprecated function call is used to create a script of the same name, and the script calls the equivalent GMS2 GML function(s) needed to achieve the equivalent results. It should (in principle) be possible to replace the call to the compatibilty script with the code inside of the compatibility script, and thereby convert the project to pure GML2. This does not apply to __compatibility scripts, however. If your project converts with these, it may be necessary to rewrite your project a different way to make it pure GML2. Or you may be able to leave it alone and hope that you don’t need to maintain that part of the project.

Collision Mask problems

Although my project would build and run, the conversion process was not 100% perfect. I noticed that some objects seemed to be colliding in a way that indicated that there was a problem with their collision masks. Sure enough, when I went into the Sprite Editor to have a look, I found that the collision masks were all wrong.

Upon further investigation, I determined that the only type of collision mask that currently works in GMS2 is a rectangle mask. Diamond, Ellipse, Precise, and Precise Per Frame masks are available options, but when I use them none of them work — collisions do not register and no event happens.

Moreover, I found that the collision mask editor does not seem to draw the mask shapes very well. When I tried to draw an ellipse mask, the right and bottom edges of the ellipse were flattened. I spent a lot of time trying to re-draw them to fix this problem, but the editor just overrides what I try to draw, and there’s no way to override it.

What’s more, if I tried to adjust the Alpha Tolerance on the mask, it would reset the mask to fill the entire sprite.

Very likely these are bugs due to the software still being in Beta status, and will not be long-term issues with the import process once GMS2 is officially released from Beta. So, clearly, the Sprite Editor has some issues and a long way to go before it is ready for release, including features which apparently have yet to be implemented.

Image Editor WTFs (Woes To Fix)

I also had a lot of problems with getting used to the new Image Editor. Most of this is a matter of UI polish, but there’s so much that is familiar, yet different, in the Image Editor UI that it’s giving me a lot of frustration. I fully understand the need for a user interface to change over time, but I do not understand many of the changes that have been made with the Image Editor. It’s tough to even know how to formulate my questions about them.

I find that Select and Copy operations don’t behave like I’d expect them to — copy creates a new Brush in m brushes palette. I can’t simply paste the pixels I’ve selected, and expect them to appear in the image at the position where I copied them from. This makes aligning static elements appearing in different frames in an animation a huge pain. Unless I’m missing something. Yes, there’s onion skinning, which is a great feature to have, but I don’t want to have to do painstaking image placement, I want to simply paste and see the content draw in where it was in the frame where I copied it from.

There’s also no replace color tool in the new Image Editor. In the GMS1.x Image Editor, there used to be a handy tool that would replace all pixels in the image matching the color you clicked on with the color set in the tool. For example, you could turn all red pixels green, with a single click. This was a useful tool, and I miss it.

I find the Text Tool in the Image Editor to be in need of a great deal of additional refinement. Currently, it is not very usable. I need to be able to reposition the text after I’ve typed it, but before committing. Most modern graphics editors allow this, but in GMS2’s Image Editor, once you click, there doesn’t appear to be any way to move the text that you’ve started typing, which makes positioning it correctly largely a matter of guesswork. There’s also no font preview, so when you select from the list of font names, unless you’re already familiar with the font in question, you won’t know what it looks like until you start using it. Currently it’s a huge pain to use the Text Toolf.

Summing up

Still, overall I’m very pleased that the code conversion process resulted in a project that could compile and run without throwing errors. There are still issues that need to be resolved, namely problems with sprite collision masks not coming through correctly in the conversion. And a lingering question about how maintainable an imported project is, if we cannot touch the compatibility scripts. I expect in time, with some more experience with converting projects, it will become apparent what the best approach to take is with modifying a game after importing it from 1.4.

Product Review: Pickle 2.0

There are a few dedicated bitmap editors out there with features specific to pixel art and sprite animation. One that I like is Pickle. It features a stripped down feature set designed to give the pixel artist just the tools that they need to use.

A full featured image editor like Photoshop or Gimp can just get in the way of the pixel artist, providing too many tools with too many options, most of which are highly un-optimal in their standard configuration for pixel art techniques. By stripping the unnecessary, Pickle gives the user a streamlined interface that they can learn quickly and use very quickly once they’ve learned the handful of keyboard shortcuts to enable them to switch between tools and modes with great efficiency.

I first tried Pickle sometime in the last year, and since then a new version has come out. While I didn’t quite grok the beauty of the interface at the time, I’ve become more experienced with pixel art since then, and decided to give it another try.

License

Pickle is available now only a paid license, no longer a nagware/donationware license. There is a 7-day trial mode, but after that you have to pay to use it.

If it’s the sort of tool you’ll get a lot of use out of, it’s probably worth the price.

For serious sprite animation, I’d recommend Spriter, which is still in beta, but has been coming along nicely in recent releases. But to create the sub-sprite bitmap resources that you’ll import into Spriter, Pickle is still a good tool to consider, especially if your art style is pixel art and you don’t do a lot of work with gradients and filters and the like.

For simpler sprite animations, Pickle has an onion skin feature that shows the previous and next frames in an animation loop so that you can compare the frame you’re working on against them. I find this really speeds up the process of creating simple animations, and removes a lot of the guesswork and trial and error. While it doesn’t have as many features as the built-in Sprite Editor that comes with GameMaker, it makes up for this by providing a well-thought out interface for the tools it does give you, and providing only what is essential to producing pixel art.

Using Pickle

Couldn’t be easier, really. The manual is simple and fits on a single page on the web site, which covers the entire application from start to finish.

All a pixel artist really needs is the pencil, paintbucket, eraser, and selection tools. When you’re manipulating a bitmap at that level, you really don’t need any other tools. Line and shape tools might be useful, but aren’t really necessary, particularly for smaller sprite and tile bitmaps. A text tool would be nice as well, in a more featureful app, but again, for the intended purpose of creating tiles and sprites, not needed.

Pickle shows its strengths in two areas: Tile making, and animation.

For tile making, it provides a means to shift the bitmap so you can more easily discern hard edge transitions in order to smooth them out. There are also mirroring modes which allow you to make symmetrical shapes easily, by mirroring the pixels horizontally, vertically, or both, as you draw them.

For animation, I really like its “onion skin” feature, which overlays the previous and next steps in the animation as a translucent layer, which you can use to guide where you draw the current frame. This helps you make better, smoother animations in less time because you don’t have to flip back and forth between frames for comparison and preview it constantly to make sure it’s right.

Shortcomings

You can only save up to 10 color palettes. This seems arbitrary and way too small. I’d like to be able to develop a palette for any particular project I happen to be working on. 10 is way too small and there’s really no excuse for it to be so low a number. I should be able to browse a directory full of xml files that define custom palettes, however many I need. Pickle does come with a few built-in color palettes that are useful for game development: the GameBoy an Atari palettes are most welcome, but they should keep adding more: NES and Commodore 64 perhaps being the most necessary. In time, I’d like to see every classic console palette emulated.

I also found the palette to be very tiny and hard to click on, and wished that it was quite a bit larger.

Wish List

There’s a lot in this section, but don’t let that mislead you into thinking that I don’t like Pickle as-is. Rather, I’m so enthusiastic about it that I can’t stop thinking of ways that I’d improve it if I could. I forwarded these suggestions to their feedback email, so I’ll be thrilled if the developer decides to incorporate any of these ideas.

Altogether, I admire the minimalism of the Pickle interface and the easy learning curve that the constrained interface permits. I wouldn’t like it to lose that beauty by adding too many new features, but I feel that if the following ideas were incorporated into the interface, it would make for just about the perfect pixel art image editor.

Indexed color/Palette swapping. Switching to a different color palette from the selection of saved palettes doesn’t cause the colors in an image you’re currently editing to change. This might be a desired capability, however. Old game consoles used indexed color and palette swaps to good effect, and an easy way to replicate this in Pickle would be awesome. An “indexed color mode” which changes the colors in the current image when a new palette is selected, instantly re-coloring the image with the new palette, would be a great feature.

Easier palette building. It would also be nice if I could define a new custom palette based off of an existing palette (such as “night colors from the NES palette” for example) — by dragging a color swatch (or a range of swatches) from one palette onto a new palette.

Color switching shortcut. A keyboard shortcut to cycle through the colors in the palette to enable rapid switching would be useful. There is a shortcut (x) to switch between the primary and secondary colors, and that is OK for what it is. But when I have a lot of colors in the palette, I want to be able to switch between any of them easily, maybe though CMD+arrow keys or CMD+scroll wheel or something like that. Mousing over to select the color from the palette, then back over to where I want to draw, is slower.

Better color picker. I find the color picker in Pickle to be a step backward from the color picker in Paint.NET. I like when I can control the exact value of RGB or HSV or alpha and see the result as I change it. I find this helps me to select a color that I like fastest. The advanced color picker in Paint.NET is damn good: I really like being able to switch between using the color wheel, RGB/HSV sliders, and the value boxes to find and select the color I want very quickly.

The Paint.NET color picker

The color picker from Paint.NET provides a better interface for rapidly finding and selecting the color I want. I’d like to see something similar in Pickle.

Another great feature to include in a future iteration of the color picker would be a mode that makes it easy to pick colors schemes based on the theory of coloring presented in this tutorial — for each color added to the palette, the color picker could auto-suggest adjacent and complimentary color wheel suggestions, to enable better shading and highlighting, allowing the user to add them to the palette automatically if desired. This would be an AMAZING feature. The awesome web app Color Scheme Designer does it right.

Canvas and imaging Scaling/resizing! Scaling is a must-have feature which is currently missing. My favorite technique with pixel art is to rough in at very low resolution, then resize the image, doubling the resolution of the image, scaling it using Nearest Neighbor scaling so that no anti-aliasing artifacts are introduced, and then refining the details.

I can work extremely quickly when I work this way — i’ll start out at 16×16, and double a few times until I’m at 64×64, or 128×128, and those single pixels in the 16×16 rough version end up doing the work of a 8×8 block of pixels when I’ve scaled the rough image to 128×128, thereby saving me a factor of 64 pixels worth of work for each pixel that I rough in with the right color by the time I get to 128×128 resolution.

Being able to Select All, then CTRL+plus to double the canvas size, and CTRL+SHIFT+plus to double the canvas size while scaling up the image using Nearest Neighbor would be great. And to marquee-select, then CTRL+SHIFT+plus to scale the marquee selection 2x with Nearest Neighbor. (Essentially it’s like working with a large 8×8 brush tool, then switching to a 4×4, 2×2, and 1×1 brush, but it’s quick and easy for me to work this way.)

 Arbitrary rotation: Currently Pickle only can rotate 90 degrees and mirror the image. Arbitrary rotation of the entire image, and pixel selections, would be extremely helpful. Not strictly necessary, as when you are manipulating pixels one at a time, you often want more precise control. But it can come in handy.