I recall that there was this one method that could piece together an image, like a button, from 3 different images - one left side, the middle that would be stretched, and the right side. I think there was something like that that takes 10 images too, but I'm not sure.
The point is, does anyone know the API call that did that, and if not, how could I go about drawing a simple button from 3 different images?
Thanks.
I think you're looking for the AppKit function NSDrawThreePartImage. There are several drawing functions in a similar vein.
Related
I program in Xcode Swift 2.2 and use SpriteKit für my User Interface. I do not need any Animation, just lots of static pictures, that can overlap and must support transparency. Any "animation" is made manually by changing the pictures to others, what means changing the Sprite Nodes to a new picture. This works well with a small amount of nodes, but when I have over 100.000 nodes, the performance is very bad. User Interface Actions like pulling down a menu or typing text works very very slow. So I look for an alternative without changing completely all of my code.
I look for a Mac OS X Library (not iOS) that supports something like a View with can be filled with rectangled pictures manually (but with transparency). The pictures come from one big picture, which contains all pictures I need. In SpriteKit I can assign a picture area to a node which is a sub-picture of the big picture like this:
let SmallPict = SKTexture(rect:myrect, inTexture:mypicture))
I need to overlap the pictures. In SpriteKit pictures overlap when placing at the same coordinates.
I only need 2D but very fast changes of the pictures must be possible.
Any idea which Class Library (perhaps a SubClass of NSView) might be right for this?
Consider using Cocos2D it has built-in batching, so it can improve performance on drawing thousands of similar nodes.
https://github.com/cocos2d/cocos2d-objc
As an exercise, I decided to write a SimCity (original) clone in Swift for OSX. I started the project using SpriteKit, originally having each tile as an instance of SKSpriteNode and swapping the texture of each node when that tile changed. This caused terrible performance, so I switched the drawing over to regular Cocoa windows, implementing drawRect to draw NSImages at the correct tile position. This solution worked well until I needed to implement animated tiles which refresh very quickly.
From here, I went back to the first approach, this time using a texture atlas to reduce the amount of draws needed, however, swapping textures of nodes that need to be animated was still very slow and had a huge detrimental effect on frame rate.
I'm attempting to display a 44x44 tile map where each tile is 16x16 pixels. I know here must be an efficient (or perhaps more correct way) to do this. This leads to my question:
Is there an efficient way to support 1500+ nodes in SpriteKit and which are animated through changing their textures? More importantly, am I taking the wrong approach by using SpriteKit and SKSpriteNode for each tile in the map (even if I only redraw the dirty ones)? Would another approach (perhaps, OpenGL?) be better?
Any help would be greatly appreciated. I'd be happy to provide code samples, but I'm not sure how relevant/helpful they would be for this question.
Edit
Here are some links to relevant drawing code and images to demonstrate the issue:
Screenshot:
When the player clicks on the small map, the center position of the large map changes. An event is fired from the small map the central engine powering the game which is then forwarded to listeners. The code that gets executed on the large map the change all of the textures can be found here:
https://github.com/chrisbenincasa/Swiftopolis/blob/drawing-performance/Swiftopolis/GameScene.swift#L489
That code uses tileImages which is a wrapper around a Texture Atlas that is generated at runtime.
https://github.com/chrisbenincasa/Swiftopolis/blob/drawing-performance/Swiftopolis/TileImages.swift
Please excuse the messiness of the code -- I made an alternate branch for this investigation and haven't cleaned up a lot of residual code that has been hanging around from pervious iterations.
I don't know if this will "answer" your question, but may help.
SpriteKit will likely be able to handle what you need but you need to look at different optimizations for SpriteKit and more so your game logic.
SpriteKit. Creating a .atlas is by far one of the best things you can do and will help keep your draw calls down. Also as I learned the hard way keep a pointer to your SKTextures as long as you need them and only generate the ones you needs. For instance don't create textureWithImageNamed#"myImage" every time you need a texture for myImage instead keep reusing a texture and store it in a dictionary. Also skView.ignoresSiblingOrder = YES; helps a bunch but you have to manage your own zPosition on all the sprites.
Game logic. Updating every tile every loop is going to be very expensive. You will want to look at a better way to do that. keeping smaller arrays or maybe doing logic (model) updates on a background thread.
I currently have a project you can look into if you want called Old Frank. I have a map that is 75 x 75 with 32px by 32px tiles that may be stacked 2 tall. I have both Mac and iOS target so you could in theory blow up the scene size and see how the performance holds up. Not saying there isn't optimization work to be done (it is a work in progress), but I feel it might help get you pointed in the right direction at least.
Hope that helps.
I am looking for an image generator for images that:
Look like cogs, wheels, progress bars, etc.
Spin.
Are small, less than 20-30 pixels. 16 might be good, i.e. 'icon size'
Are simple, just 2D no need for 3d image.
All the examples I found are large 3d ones. I want one of those little ones that I can use with things like ajax while loading up a bit of the page, transferring a file, sending a large message, etc.
The android spinning gear cog is one example.
Then I can show/hide the image as I need.
I figure a lot of people will have tackled this / know good solutions.
You can generate simple animated "loading" icons on http://www.ajaxload.info
For fancier ones, try http://preloaders.net or http://www.loadinfo.net
Fontawesome (version 3) includes a few spinning icons.
http://fortawesome.github.io/Font-Awesome/#examples
I'm sorry if my question is somewhat vague. It's been a few years since I did anything with Qt, and back then I never did any fancy image stuff. What I'm asking for below is just some general suggestions on which classes to consider using. I'm trying to avoid barking up the wrong tree from the very start.
The situation: I'm writing a Qt-based program in which I need to display a somewhat large (let's say 5000x5000) raster image. The user should be able to zoom (quickly) in and out, and pan around the image in a way similar to for example Google maps. So far, this is not very different from the Qt ImageViewer example, except perhaps for the requirement that zooming happens quickly. However, I need to draw on the order of 50k simple geometric shapes (let's say circles) on top of the image, and be able to add and remove some of these in a simple way. The circles should have the same size no matter the zoom level, and should thus either be redrawn whenever the user zooms, or should be drawn with vector graphics. Think of the circles as map annotations. These should look the same at any zoom level, and also behave nicely with respect to panning.
I guess my question is twofold:
Can Qt draw vector graphics on top of a raster image?
In general, which classes should I consider for the above?
Thanks in advance. I don't like answering vague questions myself, but maybe someone with experience with Qt's graphics capabilities has an answer.
I suggest you use QGraphicsView and friends for this. It helps handling all the view/world transformation and the vector items can be achieved with various QGraphicsItems.
You can change the sizes of the items whenever the zoom level changes to maintain constant apparent sizes.
I know this is leaning more in the direction of a designer question, but as I am faced with developing something which requires me to crop an image, I thought I would give the question a shot.
This seems like a ridiculous question to ask, but I've look all over the IDE (Expression Blend 2) to try and find a way to crop my image, but I can't figure it out.
This seems to be very much in line with Joel's question and is discussed in Podcast 58 in the sense that I'm a complete noob when it comes to designing in Expression Blend. I am adamantly interested in figuring out the most efficient way to do this. I found an article that describes a work flow you can go through that will produce a crop, which I added as an answer below, but I'm really hoping someone else will know of a quicker (less clicks) way to do something as trivial as this.
Does anyone know how this can be done?
As far as I know, there's no way to crop an image directly in expression Blend. Blend is not an image editing application. You need another tool for that.
What you can do though, is clipping an image if you only want to show a portion of it. Just add a rectangle on top of it right-click it, go to path -> make clipping path.
alt text http://img200.imageshack.us/img200/7370/example1.jpg
Now select the System.Windows.Controls.Image entry from the list you want to apply the clipping on and hit Ok
You can even use rounded rectangles, circles and custom paths to clip, but in most cases a rectangle will do the trick.
Just ran into another way.
Have a look at this question. It uses a CroppedBitmapClass as the source of an image. It's not actual drawing in Blend, but you can add it by hand editing Xaml. From your question it's not clear if you are creating a Silverlight or a WPF application in Expression Blend. The CroppedBitmapClass is available in WPF only.
With the new Silverlight 3 you can use the WritableBitmap to do image cropping:
I found an article that has steps to do an image crop, but it's very drawn out to do such a simple operation. You would think something that MS Paint can do in a couple button clicks would be similarly easy in Blend.
Here's the link.
I'm still wondering if there's an easier way to do this, however.
The other problem with this approach is that afterwards, I can't change the size of the rectangle that I'm cropping the image with, which I need to be able to do, because I have to have the image be an exact number of pixels in width and height.