I am building an experimental reading app where the text passage is presented as a single line of text on the screen. The user will tilt back and forth to move the text strip backwards or forwards. What I have tried so far is:
Placed a UILabel inside a UIScrollView and manually calculating the ScrollView’s new offset depending on the current tilt. The text scrolls in an uncomfortable, jerky motion in this implementation most likely because the current acceleration equation is just a linear function. Also, I’d rather not reinvent the wheel since Sprite Kit already has tilt physics perfected, but it is just not readily applicable on text objects.
Wanting to use Sprite Kit’s buttery smooth tilt, I placed my text in an SKLabelNode and had its X coordinates match a SKSpriteNode that I gave tilt physics. This worked very well until the moment I added a paragraph’s worth of text inside the SKLabelNode. Then it turns into a black rectangle...
Stack Overflow discussions I have found concluded that SKLabelNode is not meant to be used in the way I desire and have suggested multiline implementations, or string to bitmap image conversion. Multiline is not an option for the way I want my reading app to work.
I found the code in
How do I add text to an image in iOS Swift to implement string to bitmap image conversion, then making that image an SKSpriteNode. The moment the image’s width exceeds 2000 (only enough space for a short sentence in 50 pt font), it becomes a black rectangle. I imagine up the text into smaller chunks to fit inside this 2000 limit will really complicate the code and make user statistics like words per minute much harder to calculate.
At the top is what I want the text to look like (user tilts left/right to read next/previous), and the black strip on the bottom is the black rectangle that appears if the width of the text is way too long :(
Does anyone have any suggestions for what else I could try? Once again, my requirements are:
The string must be presented as a long, single line on the screen
The user tilts the device to read forward/backward
The acceleration is smooth so it’s easy on the eyes :)
Perhaps you can try loading one sentence at a time into one SKLabelNode. You will also have a second SKLabelNode to act as the on-deck cache. When one SKLabelNode moves off the screen, you can position it at the end of the of the SKLabelNode currently on screen. That's how a table view in UIKit works. The only difference here is that your "table cells" are scrolling horizontally, and you'll have to perform the work to reset them after they move off the screen.
Related
I'm new to Unity and to game development in general.
I would like to make a text-based game.
I'm looking to reproduce the behavior of an instant messenger like messenger or whatapp.
I made the choice to use the Unity UI system for the pre-made components like the rect scroll.
But this choice led me to the following problem:
I have "bubbles" of dialogs, which must be able to grow in width as well as in height with the size of the text. Fig.1
I immediately tried to use VectorGraphics to import .svg with the idea to move runtime the points of my curves of Beziers.
But I did not find how to access these points and edit them runtime.
I then found the "Sprite shapes" but they are not part of the "UI",
so if I went with such a solution, I would have to reimplement
scroll, buttons etc...
I thought of cutting my speech bubble in 7 parts Fig.2 and scaling it according to the text size. But I have the feeling that this is very heavy for not much.
Finally I wonder if a hybrid solution would not be the best, use the
UI for scrolling, get transforms and inject them into Shape sprites
(outside the Canvas).
If it is possible to do 1. and then I would be very grateful for an example.
If not 2. 3. 4. seem feasible, I would like to have your opinion on the most relevant of the 3.
Thanks in advance.
There is a simpler and quite elegant solution to your problem that uses nothing but the sprite itself (or rather the design of the sprite).
Take a look at 9-slicing Sprites from the official unity documentation.
With the Sprite Editor you can create borders around the "core" of your speech bubble. Since these speech bubbles are usually colored in a single color and contain nothing else, the ImageType: Sliced would be the perfect solution for what you have in mind. I've created a small Example Sprite to explain in more detail how to approach this:
The sprite itself is 512 pixels wide and 512 pixels high. Each of the cubes missing from the edges is 8x8 pixels, so the top, bottom, and left borders are 3x8=24 pixels deep. The right side has an extra 16 pixels of space to represent a small "tail" on the bubble (bottom right corner). So, we have 4 borders: top=24, bottom=24, left=24 and right=40 pixels. After importing such a sprite, we just have to set its MeshType to FullRect, click Apply and set the 4 borders using the Sprite Editor (don't forget to Apply them too). The last thing to do is to use the sprite in an Image Component on the Canvas and set the ImageType of this Component to Sliced. Now you can scale/warp the Image as much as you like - the border will always keep its original size without deforming. And since your bubble has a solid "core", the Sliced option will stretch this core unnoticed.
Edit: When scaling the Image you must use its Width and Height instead of the (1,1,1)-based Scale, because the Scale might still distort your Image. Also, here is another screenshot showing the results in different sizes.
I am trying to animate my main character's attack , but when I add all the frames together the character shifts a little bit back and forth to compensate for the change in width. Only the characters arm is drawn differently but since it changes the width of the entire picture ,unity changes the position of the character to compensate for the change in width.
I know it's hard to ask for help on animation since I cannot provide a video of my problem , but if anyone has an idea on how to solve it?
In the sprite editor, make sure the character sprite's pivot is always in the same spot.
I've been searching around for this one for a bit, and unfortunately I can't seem to find any good, consistent results. So, in the Unity UI system, buttons can stretch without becoming pixelated or distorted. This is because the texture is split up into 9 parts - the corners, middle, and sides.
This works because the button's middle and sides are stretched, but not the corners. Then, the button appears not pixelated, at any dimension.
So, the question is as follows: How can I do the same thing for a transparent, unlit texture in 3D space? I have a speech bubble texture on a flat plane that I know how to re-scale to fit the text in the speech bubble.
I've set the texture type to Multiple Sprite, and divided it up into 9 parts. However, I cannot seem to find where I can set the texture to act like the UI button does, and I'm not sure that this is even possible in this way in 3D space.
Is there a way, or should I just make the different parts of the texture different objects, and move them together? That would seem very inefficient and ugly compared to this.
To accomplish what you are asking, you would need to create tiles for this speech bubble and then write a script that procedurally builds a speech bubble based on the plane's scale value. You could also try just changing the texture's Filter Mode to Point.
However I really don't think you should be using textures for this anyway. Why not just use a Unity Canvas and set the Render Mode to World Space? Then you can just set your text box to be a sprite, not a texture, and set its filter mode to Point (See below). This would also make it a lot easier for when you want there to be text in the speech bubble later on.
I have never seen this issue before, its very strange. Just wondering if anyone else has come across this too.
I have added a sprite to my game, its supposed to be the top left corner of a box to put text on to. I want to make it scalable without loosing anything so i have it broken up into sections. In the image above the one on top is the image itself, and then the one on the bottom is the image when its being drawn in the iPhone simulator.
Any idea why the last column of pixels on the right are altered? I have not scaled the image at all.
I don't know about Cocos2D, but in general terms what you've done here is to draw the image at a position that isn't an exact multiple of one pixel.
Consequently even without scaling you have resampled the image across a grid that doesn't coincide with the original image data, causing all pixels to be a bit off. It's just the right-hand edge is the most obvious case, since the resampling leaves you with a partial transparency here. But look at eg the two rows of purple pixels in the border: they're not the same, because your vertical alignment is off as well, causing a small amount of colour from the grey border below it to bleed into the lower row of purple.
Ok I actually figured it out this time. Cocos2D adds a bit of antialiasing to CCTextures. To stop it from doing this you need to call this:
[[mySprite texture] setAliasTexParameters];
to turn it back on you call this:
[[mySprite texture] setAntiAliasTexParameters];
I am adding some functionality to an iPhone app, and could use some help in picking the fastest / most efficient / best practice approach for solving this problem:
At the upper-half of my screen, I have speech bubbles (think comic book) that are UIImageViews translating across the screen (dynamic x & y position). It is a UIImageView because there is an image as the background of the speech bubble.
Each speech bubble has a matching image moving around the bottom of the screen (elsewhere in the layer tree)
I would like to draw a tail (that triangle bit from a speech bubble) so the point of the triangle is tracking the lower image, with the base of the triangle being attached to the bottom of the upper UIImageView. (technically the base doesn't have to be butted against, it can overlap as long as I can match the color of my background image to the triangle).
I have already done all the tracking & drawn a line with CGContextStrokePath methods, and now I am stuck on how to replace the line with a triangle.
I have looked at drawing a triangle in Quartz and filling it. My concern is the speech bubbles are repositioned every 1/10th of a second, and it looks like drawing just the line used for proof of concept had a pretty severe performance / visual smoothness impact.
One idea I have is to do the trigonometry myself, and stretch & rotate an image of a triangle to connect each of these speech bubbles with the lower spot. Something is telling me there is a more efficient / more elegant solution, but I am not able to see it looking through the documentation. Any help on how you have or would approach this issue is appreciated. Thanks.
If the speech bubbles are fixed in size, just use a static UIImage. Set the image view's layer.position property at the point of the triangle. Then you can use view animation to move the bubbles around.
If you need the speech bubbles to be different sizes, I'd create a resizeable image using resizableImageWithCapInsets. Then I'd do the same as above to position it.
If there was something special about the speech bubble that I could't achieve with either a static image or a resizable image, I'd probably create a custom CA Layer or layers to get the effect I wanted (Like a gradient layer with a shape layer as it's mask layer)