I'm building a cell-based game that essentially works like dominoes: you start with one tile in the center, then connect additional tiles to it that can branch out in all directions. I have my game table all set up and working great... now I just need to make it scroll to accommodate the expanding content.
So, this doesn't seem to fit easily into a UIScrollView's built-in behavior. For one thing, cells expand in all directions – potentially going into the negative coordinate space of the UIScrollView. As far as I can tell, UIScrollView does not allow an actual CGRect with size AND origin to be defined for the scrolling content area. It appears you can only define a width and height for the content area that extends from point (0,0). Is this true, or am I missing something?
Assuming my understanding of the content area limitations are correct, how would one ideally handle this problem? My go-to idea would be to shift all subviews into positive coordinate space as the game board expands, then update the ScrollView's contentOffset property to counter the shift and make the transition invisible. I just want to make sure I'm not reinventing an inferior wheel before I start developing this.
Thanks in advance for any and all ideas!
I believe your idea is the good one, every time a tile is added, you may need to adjust your content view in order to be able to center on the tile that just was added.
Hence if this is "backward" (-x or -y) and your on top of your view (or nearly), you'll have to extend your contentView (surely the same way you do for +x, +y) and thus, adjust every of your tiles with the translation you did to your contentView's down-right corner.
Following up... yep, that did it. I set up the display so that it redraws the grid of cells from the upper-left corner. Whenever a new row or column of cells is added to the top or the left, the UIScrollView's contentOffset shifts by the newly added pixels to hide the change in content position.
Related
I'm trying to add some buttons to a gameObject which is a scroll view child. The child is a very wide image, about 4 times as wide as normal screens, which is why I let it control the height, so that it is always from top to bottom, and only exeeds horizontally where scroll is allowed.
Here you can see my setting.
1. is the wide image
2. is a banner that used to be part of the image, but now I want it to be a individual gameObject.
I don't know how I can make the banner (2) inherit the behavior of the "full map" (1), right now when I choose free aspect and resized the game view, the "full map" scales nicely, so the it always fits from top to bottem. The more narrow the screen is, then more of the map will exceed to the right, and vice versa.
However the problem is that then banner (2) has a rect transform, which is set with x,y coordinates relative to the parent which scales. So as i resize around the view, the banner gets out of it's intended position, and also does not scale with the. I have tried many different components, but without luck. Here among, scale constraint, canvas scaler, position constraint
As you can see in this gif, the banner does not scale down, as the island gets smaller, also it stays in the same position horizontally.
Any suggestions on how I can make the children os the map behave as they were part of the map?
Deleted previous, misunderstood the question.
Proposed solution:
You remove the map part from UI and create it as an object: You attach the map image as a texture to (ie) a plane (see a video here). You add the "infinity island" as another texture and have it placed over the island image.
After that, you control the camera to zoom in/out of the island and not struggle with any scaling or moving UI.
I think you need to anchor the images to center of the island mini image, you can drag the anchor gizmo from the scene hierarchy.
If you see it as free aspect it gets buggy and difficult to handle, but if you choose a resolution everything is smooth.
Is this what you want?
Change the resolultion
I am working on a small game, in which the user can drag rows and columns of images to solve a puzzle.
The puzzle does not use the whole screen, the "puzzle area" is in a rectangle area from 0,160 to 320,480.
Now, if the user drags a column of the images up, the top image in that column would be displayed "out of" that puzzle area. How could I only have that portion of the image shown, that remains within the puzzle area. Like not showing the whole 50x50 Pixel of the image, but only the lower 40x50 Pixel etc.?
You just need to set the frames on your views properly. If your puzzle views frame ends at the (0,160) point on top, any subviews you've added to it; such as the puzzle pieces will be hidden when they move out of the frame.
Hopefully I'm not oversimplifying the problem, but one of the easier ways I can think of working this scenario is by maintaining a proper view structure while moving the puzzle pieces.
i.e. as long as the view on the top half of the screen is higher up on the view hierarchy than the puzzle pieces (you could ensure this by properly maintaining the subviews), the puzzle pieces will be hidden under the top view if they move beneath it.
Is this what you need?
Cheers.
I am just tryin to give u some ideas.. Hope u can implement with that...
First use touchesBegan and touchesMoved methods to detect how much pixels the image has been dragged. Simultaneously u can also move the frame of the image to a new coordinate , hiding a portion of the image....tat is out of puzzle area.....
Hope this helps....
myImageView.frame=CGRectMake(0,0,50,50);
Let the above one be the actual frame. Now u have received the amt of pixels thru which the user has moved the image from touches method. Let it be some y1. To hide a part of the imageview reframe the imageview like this ,
myImageView.frame=CGRectMake(0,-y1,50,50);
negative y1 since u want to move out of the screen..
Hope this helps.
I have an image that is 320x480 and upon orientation change this image obviously hangs out of view. There are some images where the focal point of it sits with it's bottom cut off (which isn't undesirable). My issue however is when the user pans vertically to see the full image, the view appears to snap to the bottom meaning the top of the focal point is cutoff. What I wish to happen is that the users can "free-scroll" through the image and perhaps move the images so the focal point is centre screen, instead of cutting off the top and bottom. I understand this is a difficult concept to describe in words so I've attached some images below.
This is how it starts:
This is where it snaps to the bottom:
This is the kind of view I wish to have but cannot:
Is there a way to control this "snapping" or perhaps a method I could use to override it when dealing specifically with this kind of orientation? My issue is that i WANT it to snap when panning left/right onto the other images in the ScrollView, just not up/down.
EDIT:
pagingEnabled is the property that controls this snapping, but is there anyway to detect if the movement is Up/Down or Left/Right and disable or enable this property in each occasion?
Cheers for any help you can offer
You can try using two nested scroll views; one is limited to scrolling horizontally with paging enabled, and one (or one for each page if you're displaying several images?) limited to scrolling vertically with paging disabled. By default this will work like you said, paging/snapping horizontally but free scroll vertically. However, it will only let you scroll in one direction at a time (either horizontally or vertically, not diagonally).
If you want to use nested scroll views like this but you'd like to allow scrolling/dragging in both directions simultaneously, take a look at my solution for this: Nested UIScrollViews scrolling simultaneously
I'm trying to figure out if I can get what I want out of UIScrollView through some trickery or whether I need to roll my own scroll view
I have a series of items in row that I want to scroll through. One item should always be centered in the view, but other items should be visible to either side. In other words, I want normal scrolling and edge bouncing, but I want the deceleration when the user ends a touch to naturally settle at some specified stop point. (Actually now that I think of it, this behavior is similar to coverflow in this respect.)
Take a look at this project: SwipeView
Good luck
I'd check out https://github.com/nicklockwood/iCarousel, it's awesome.
You should take a look at the "pageingEnabled" property of a UIScrollView. Basically you can define a size of a segment and the number of segments. Then it will automatically stop to adjust to that specific segment like you want. If you set the segments to be smaller than the actual width of the screen I think you should get the behaviour you are looking for.
I have noticed that when placing PNG images into a view using IB and/or animating those images to various positions around a view, the image can sometimes get a slight blur.
In most cases I can remedy the blur by adding .5 of a pixel to the images position.
[lbLiteButton.layer setPosition:CGPointMake(140.5,159.5)];
Sometimes I have to adjust both x and y like above. Sometimes I only have to adjust x or y.
I remember reading somewhere that this has to do with the size of the image and how core animation works and something to do with half pixels... but I cant find the article anywhere!?
The problem with the ".5 pixel" solution is that its different for every PNG image depending on size, so you can't reuse custom animation because you have to customise it for each different image.
Is there a way to ensure that no matter where I place or animate my image, I won't get any blurred positions?
Does anyone have any information on this?
Thank You!
The position property of a view's layer is based on its anchorPoint property. By default, that is (0.5, 0.5), meaning that the anchor point of the layer is at its center. If your view (and its layer) are an odd number of pixels wide or high, setting an integral value for the position will cause the view's origin to be non-integral, leading to the blurriness you see.
To work around this, you could figure out an integral version of your position by taking the desired center position of the view, subtracting half of the view's width, rounding that value, then adding half of the view's width, and repeating for the height. You could also set the anchorPoint for your view's layer to (0,0) and position the view based on its origin.
There's a chance that this might also be related to a misalignment of a superview. To diagnose this, you could use the Core Animation instrument in Instruments, and select the Color Misaligned Images option. It should color any views or layers that are non-pixel-aligned in your application.
I had a similar experience with blurred text in a label, and it was caused by the superview of my labels having a subpixel offset. So even though the location within that view was integral, when adjusted to its parent's coordinates it had a half pixel or so offset, causing the blur.
If you're getting this only sometimes, though, that might not be the case. Is your superview moving around, or positioned strangely? I'd say the best thing to do is to figure out the precise circumstances under which this is happening.
IB has a bug where sometimes (not often) just moving elements around will render them fuzzy - you see it most often with UILabels and UIImageViews (although that's probably just what is most apparent). I'm sure it has to do with the points mentioned above in some way, but the fix is often to set the location (x,y) coordinates for the element to 0,0, and then back to the original values. This usually resolves the issue (again, this is in IB).