My question would be best asked with a simple example:
If I have a game where a ball is near the bottom of the screen, and the goal of the game is to dodge objects scrolling down towards it, I am having trouble figuring out the best method to make the game "fair."
If the game screen is larger, then that player has an advantage because they see the scrolling objects at the top of the screen with more time to move away from it.
I'm wondering...what is the best practice to "scale" the game to where regardless of the size of the screen, the rate at which the scrolling objects move towards the ball, and eventually reach it is exactly the same?
My first instinct is to scale how fast the objects scroll with the size of the frame the game is in. But for some reason that feels clunky to me, or that if I just scale all the objects relative to the size of the screen, that is enough and I'm worrying over something minimal at best.
Anybody ever had a same kind of issue? What is the best means to have a things "behave" the same if the size of the screen/frame plays a key role in your game?
I am open to general Swift and SpriteKit, as I am just in early stages of thinking how to accomplish it.
For SpriteKit, you'll normally design the game, including the sizes and speeds of objects, with some particular logical frame size. That will then get scaled to fill the screen in some appropriate way. How the scaling should be done depends on the game though. Usually you don't want to have different scalings for width and height, so the issue boils down to how to handle different aspect ratios. There are two main possibilities:
Make sure there's a certain minimum amount of the game area shown, and show a bit more either horizontally or vertically depending on aspect ratio. Potentially unfair if you don't do anything else, but as you mentioned something like scaling object speeds can compensate.
Pad out the game area with some non-playing area parts (perhaps decorative, or containing parts of the controls, score display, etc.) Depending on device aspect ratio, different parts of this get cut off or shown. The real playing area is exactly the same dimensions on all devices.
Related
I am entirely new to iOS, and for my first project I am trying to make a chaos game app, which naturally requires a large number of points be drawn. Ideally, I need 10^5 to 10^6 individual pixel points for the illustrations.
This is a performance concern. Right now, I am using CGRect with very small height and width, is there a less expensive way to do this?
I dont need to draw all of the dots at once, but I do need them to appear on screen over a reasonable period of time to show the progression of the emerging fractal.
I want to create a landscape iOS game with SpriteKit, which can be played both on iPhone and iPad. Because of the different aspect ratios I thought it would be usefull to have a fixed frame for the actual game. I would like to treat this game area like a separate container. The rest of the visible area should be filled with a ground, where the character is running on, and a ceiling. Depending on the device the ground and the ceiling will be more visible on the iPad and less on the iPhone.
The anchor point for the game as reference for all upcoming nodes should be in the lower left corner of the game area.
In the following picture I tried to draw my thoughts:
Can you tell me, what is the best way to proceed and which features of SpriteKit are worth to take a look at? I have never worked with scaleModes or something else like this before.
Thank you
I’m working on various iOS apps and I need an interface with the following capabilities:
I have a scrollview (covering most of the screen) which is scrollable both directions
This scrollable view contains a lot of rectangles. These rectangles are intractable. User can modify them, move them around, create and delete. So ideally they would be all CALayers or UIViews.
The problem is because there could be 100s or 1000s of those displayed at once, CALayers or UIViews may not be very efficient.
The scrollview could be 10-20 times bigger than the screen size itself. And fully covered with these shapes. So when the user scrolls it shouldn’t see any flickers or shapes appearing after the scrolling is done. e.g. If I use CATiledLayer and user scrolls, you can see things drawn after scrolling is done.
Smooth zooming. Zooming out is particularly challenging, because the shapes would need to be drawn on parts of the view which are going to become visible. Also, ideally I’d rather not use something like CGAffineTransform to perform scaling, I like to have a pixel accurate scaling.
I’ve tried various things, but I can’t seem to be able to get decent frame rates even on iPhone 6. Even tried drawing every frame, but it’s too expensive Core Graphics to handle it. Is there code examples someone trying to do a similar thing or an open source library? I’m trying not to use OpenGL, I feel like it’s an overkill, but I will try it if I have to. FYI, I have no experience in OpenGL yet.
Procreate for iPad does what I’m trying to do perfectly, it’s super responsive and zooming is pixel accurate. I know they use OpenGL and I’m not making drawing apps. The reason I mention it is because it shows what I’m trying to do is possible.
I think you need to move from UIKit to some 2d or 3d engines:
Cocos2D
Sparrow
Unity
OOlong
I am creating an app that represents the pages of a book with animation and interactive areas. There is one character who is constant throughout but each page has them represented in a different look so I cannot re-use the frames very easily. This character has wings, legs and eyes which all need to move differently. What I am wondering is what is the best way to take them from the PSD into the app? The two approaches I can think of is either:
Create a separate png for each frame of the animation and then cycle through them (this would be combined into a single sprite atlas)
Split the character into their parts and then position, rotate, scale and move them in the app manually.
The main reason I am considering point 2 is that if I do point 1 then I will need to create a lot of frames of animation for each page and also create them all twice to cater for normal and retina displays.
Please let me know what the correct approach for this may be and if there is anything I should keep in mind.
Thanks
Option 1 sounds much more feasible. 300 frames is a bit too much, but you dont have to load all of them in the memory at the same time. Divide your frames into multiple spritesheets of 1024*1024 and make sure all the frames of the same animation are on a single spritesheet. So, at any given moment, only a single texture would be loaded in the memory, which I guess is the minimum anyway.
You can also do a bit more optimization maybe, by creating separate animations for things that behave the same in different poses. For example, if the eyes are blinking exactly the same in different poses, you can stop creating separate frames for each pose just for blinking. Just take out the eyes (ouch!), create a separate animation for them, and place it over your character's animation node.
Going with option 2 would create un-necessary complications, both for you and the poor device.
I'm developing a game in as3 for iPhone, and I've gotten it running reasonably well (consistanty 24fps on iPhone 3G), but I've noticed that when the "character" goes partly off the screen, the frame rate drops to 10-12fps. Does anyone know why this is and what I can do to remedy it?
Update - Been through the code pretty thoroughly, even made a new project just to test animations. Started a image offscreen and moved it across the screen and back off. Any time the image is offscreen, even partially, the frame rates are terrible. Once the image is fully on the screen, things pick back up to a solid 24fps. I'm using cacheAsBitmap, I've tried masking the stage, I've tried placing the image in a movieclip and using scrollRect. I would keep objects from going off the screen, except that the nature of the game I'm working on has objects dropping from the top down (yes, I'm using object pooling. No, I'm not scaling anything. Striclt x,y translations). And yes, I realize that Obj-C is probably the best answer, but I'd really like to avoid that if I can. AS3 is so much nicer to write in
Try and take a look at the 'blitmasking' technique: http://www.greensock.com/blitmask
From Doyle himself:
A BlitMask is basically a rectangular Sprite that acts as a high-performance mask for a DisplayObject by caching a bitmap version of it and blitting only the pixels that should be visible at any given time, although its bitmapMode can be turned off to restore interactivity in the DisplayObject whenever you want. When scrolling very large images or text blocks, BlitMask can greatly improve performance, especially on mobile devices that have weaker processorst