I recently made a game with game maker and I've tried converting it to html5, but it's got some big errors... here is the game in html format: http://ivatrix.com/Game/index.html
First off, text is meant to appear in the top left like how you can see in this screenshot: http://gyazo.com/baa386fe06cfac9439c83b6e5192efd8 the text only appears after you create a combo.
Secondly, when you click on an orb it's meant to scale down to half it's size then scale up to 1.5x it's size, but instead it's shrinking until it's 1px large then infinitely increasing in size. Draw code is here:
if sl=1
{
if (s=0.6 or s=1) then d=d*(-1)
s+=d
if(frozen=1)
{
draw_sprite_ext(sprite_index,global.skin,x,y,s,s,0,c_blue,1)
}
}
And then there's other small errors like some text won't display, particle effects don't seem to draw, the game always returns saying there is no match on the board. That's all I've found so far.
Does anyone have any idea what I can do to fix this?
Thanks.
Since no one has provided an answer and I've found one myself, I'll put it up here so others in the same boat can benefit as well. Practically, the source of all my problems with floating point numbers being irregular, for example instead of it being 1 it could be 1.000000003, which meant if you were to check if that variable was equal to one, it would return false. Further information here: http://help.yoyogames.com/entries/77891197-HTML5-Issues-And-Differences
So for an example in my case, I changed the line
if (s=0.6 or s=1) then d=d*(-1)
to
if (s<0.6 or s>1) then d=d*(-1)
And now the problem is fixed.
Related
Following up on my question from yesterday:
SciChart - showing labels for all ticks
Thanks to the answer I was able to get the label density where I needed it. But I still have problems with label placement. As you can see in the screenshot, rotating the labels caused them to stick upwards into the graph. I need them below the axis. I've tried everything I could find in the API that I thought might help me:
a TranslateTransform - I tried moving both X and Y both ways. No
result.
VerticalAnchorPoint and HorizontalAnchorPoint - setting
VerticalAnchorPoint to Center actually moved the labels, but only by
3mm and in the wrong direction.
Horizontal/Vertical
Alignment/ContentAlignment - didn't do anything.
I've even tried
bloating the labels by appending a lot of spaces to the strings. A desperate attempt, I know.
Furthermore, the horizontal position of the labels is not correct either. In the screenshot you can see the first bump on the graph goes down on what looks like CF.02. But in reality it's set to CF.01. It would seem the labels are moved to the left of their corresponding tick. I need them to be displayed below the center of their respective tick, like the original solution.
[edit: image removed to prevent potential client IP issues]
In the SciChart's WPF Xaml Styling a Chart example there is a demonstration of how to rotate labels by changing the AxisBase.TickLabelStyle.
This uses RenderTransform to rotate labels by 15 degrees. However, if you use 90 degrees, the labels overlap the surface.
Changing the RenderTransform to LayoutTransform forces labels to be drawn in the correct place (below the axis).
You can read more about the difference between RenderTransform and LayoutTransform here.
Is there any way of adding some kind of automatic margin between two or more fillText()?
I have a set of fillText() that is changing every frame, they become longer and shorter, but I would want them to to have a fixed space between the text. I don't know how else I can explain this. I created a fiddle to show what I mean.
Example, if you look at the seconds counter, when there is only 1 character in there, the 'S' character is longer away from the seconds than it should.
How would I fix this? I'm pretty new to canvas. Thanks in advance.
Okay, so I found a solution. I'm now grabbing the width of each text element and using that, plus some more in the second argument of fillText().
https://jsfiddle.net/9tv44ja5/3/
^ Updated solution. It's a bit messy atm., will try to clean it up abit later.
I am sure you guys must have seen that font resizing option on some website where they display alphabet "A" in small, medium and large sizes clicking on which changes the font size of website. I have two questions:
What is that thing called actually? Like if there is a term to describe it?
What arguments can I give against using this on website? One of the client has asked to incorporate it in website and I don't see any real benefit in using it so what arguments can I give to client against using it?
It is called "font size change options", or "font resizer".
Here is a simple and minimal 5 lines of code jQuery tutorial: http://www.programming-free.com/2013/12/increase-decrease-font-size-jquery.html
A bit of the code that enlarges the font size:
newFontSize= parseInt($('#content').css('font-size')) + 2;
$('#content').css('font-size', newFontSize);
The user could just use CTRL+ in browser. The problem is that the final user doesn't know this trick.
This is a fast and simple implementation, no need to convince the client against it. I find myself getting hard to see clear small text after 10 hours of programming. Maybe the client has sight problems and needs to address others like him.
"As of jQuery 1.6, .css() accepts relative values similar to .animate(). Relative values are a string starting with += or -= to increment or decrement the current value. For example, if an element's padding-left was 10px, .css( "padding-left", "+=15" ) would result in a total padding-left of 25px."
Reference
So to do that you can use a function callback which will return the actual value, then you return the new value.
Like the following.
$("#fontPlusBtn").click(function (){
$("#textDiv > *").css("font-size", function(i, value) {
return parseInt(value) * 1.1;
});
});
Working Demo for Increasing Font Size on Button Click:
I hope this helps you as you described font size change on Button Click.
What is the target group of your client? Adding such feature is generally considered good practice of web accessibility. It doesn't really take up too much space on the screen and doesn't mess with the design but gives users the options to enlarge the text in case they are having troubles reading the text.
I wouldn't try to argue against it but instead find a neat way to implement the functionality.
BBC's accessibility policy is a good read: http://www.bbc.co.uk/accessibility/best_practice/policy.shtml
I am currently creating a word cloud using an in house developed library, it uses the svg element text to display the words, the problem I have encounter is that the area of some words sometimes overlaps other words as you can see if you inspect test1 in this jsfiddle, this becomes a problem if the words must be clickable.
I want to know if it is possible to reduce the area of the text to the minimum, just wrapping the word, a small padding is accepted.
I have already tried the solution posted in this answer but it didn't work.
I would prefer a css solution if it exists rather than messing with svg but if there is no other option that will do.
Edit: Ok, enough reputation to post images. What I currently have:
What I would like to have:
There are two problems; I currently have only a solution to one. Your text example is misleading. Try Text1g instead to see the descent (i.e. the amount of space below the baseline which the g needs). If you do this, then you'll see that the texts really overlap - you just don't notice because your test text doesn't contain a good set of test characters.
Apart from that, I see that the element is 67px high while the font-size is only 60px. I don't see where the additional 7 pixels are coming from. It's not padding and not margin :-/
Why do you need to know the minimum bounding box?
If it is because you are linking with the element, or applying click events to the words, then you should investigate the pointer-events attribute.
You possibly want something like:
<text ... pointer-events="fill">ejecutar</text>
You will only get events when the pointer is over the fill of the words. This might be a bit fiddly for clicking though because the holes in words will not be clickable.
You could ease that by putting an invisible <rect> of an appropriate size in front of the word with pointer-events="fill". The "fill" value will attract events for where the fill would be even if it is invisible. However that requires you know the bbox of the word, which we already established you don't have (?).
You could give the words an invisible fat stroke and use pointer-events="all". The invisible stroke will make the clickable area (invisbly) fatter and hence the inter-word holes smaller.
In actionscript 3, my TextField has :
CSS styling
embedded fonts
textAlign : CENTER
autoSize : CENTER
... when italics are used the very right character gets slightly cut off (specially caps).
It basically seems that it fails detecting the right size.
I've had this problem before but just wondered is there a nice workaround (instead of checking textWidth or offsetting text etc.)?
Initialize your textField as you always do, using multiline, autosize, htmlText...
Then do this little trick :
// saving wanted width and height plus 1px to get some space for last char
var savedWidth = myTextField.width + 1;
var savedHeight = myTextField.height + 1;
// removing autoSize, wich is the origin of the problem i think
myTextField.autoSize = "none";
// now manually autoSizing the textField with saved values
myTextField.width = savedWidth;
myTextField.height = savedHeight;
Not that it is much comfort to you, but Flash sometimes has trouble with this seemingly simple task. CSS styling of html TextField was a nice addition but it has caused headaches for text-rendering. In fact I very rarely use CSS for styling text for that reason. I can only imagine that combining bold, italic and normal type faces within the HTML causes Flash to get some of the width calculations wrong which causes autoSize to set the mask a tiny bit short. I hope very much that the new text rendering engine in Flash Player 10 will finally fix these issues (it certainly looks better in theory).
So my solution is never to use HTML with the exception being when I require <a> links in my text ... and there are even some tricky text shifting issues there. In those cases I avoid mixing different font weights and font styles within the same text field. All other cases I use TextFormat directly on TextField.
I suppose if you can't get out of your current architecture (for some reason) you could try adding to the end of your html encoded strings. Or you could manually set the width of the field and not rely on autoSize (as you have mentioned). But if you keep on the CSS/HTML route you may find another new and painful limitation just when you don't want it.
I've had issues with TextField masks behaving differently in the Flash preview, and in the actual browser plugin. Usually, and this is strange to me, it would appear more correctly in the browser. Have you tried running the swf in a browser to see if the problem is actually an annoyance rather than a permanent problem?
I had said this:
My in-ideal approach to solving this is to attach a change event to the TextField which always adds a space after the last character of the field. And then to remember to trim this space off when using the value.
But that didn't take into account that this probably doesn't have a change event and that it's an HTML rendered text field. To add a trailing space in the HTML text field throw in an again, that's not really fixing the problem.