User Tag List

Results 1 to 9 of 9

Thread: Any tips for crisp graphics in HTML5?

  1. #1
    Clicker Fusion 2.5 MacFusion 2.5 DeveloperHTML5 Export ModuleiOS Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)Universal Windows Platform Export Module (Steam)
    ratty's Avatar
    Join Date
    Apr 2012
    Posts
    1,135
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Any tips for crisp graphics in HTML5?

    There's all sorts of resizing going on based on browsers, etc., so this is becoming a complex task. The attached graphics are nice and sharp in the test runtime and in a desktop app, but have nasty edges in HTML5.

    I have all three boxes ticked near the anti-ailising stuff in the application properties. I'm also using a solid color with thin alpha edges. Any other advice?

  2. #2
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleUniversal Windows Platform Export Module
    Retrobolt's Avatar
    Join Date
    Mar 2016
    Posts
    402
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Bump
    I having the same annoying issue with my game.
    It's never as crisp as it is in a EXE.

    https://numbergame.netlify.com/

  3. #3
    Clicker Fusion 2.5 MaciOS Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Fusion 2.5+ DLC (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)
    TGeorgeMihai's Avatar
    Join Date
    Nov 2015
    Posts
    134
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Same problem here, it looks like a downscaled resolution, something like 320p. Any fix for that ?

  4. #4
    Clicker

    Fusion 2.5 DeveloperFusion 2.5+ DLCHTML5 Export ModuleiOS Export ModuleSWF Export Module
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)

    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Is it consistent across browsers? This is a screenshot snipped from a 640x360 project played at 1920x1080 on Firefox with no issues (The jpeg artifacts are the result of the forum upload, so I've included the lossless png in the zip file). The arms and bow are rotated over 360 degrees, so this is using fusion's in game rotation and even that looks reasonable.
    Also what do you mean by a thin alpha? Less than 8 bits? If so see if increasing the alpha helps.
    ArcherLow.jpg
    Attached files Attached files

  5. #5
    Clicker Fusion 2.5 MacFusion 2.5 DeveloperHTML5 Export ModuleiOS Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)Universal Windows Platform Export Module (Steam)
    ratty's Avatar
    Join Date
    Apr 2012
    Posts
    1,135
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JohnArtbox View Post
    Is it consistent across browsers? This is a screenshot snipped from a 640x360 project played at 1920x1080 on Firefox with no issues (The jpeg artifacts are the result of the forum upload, so I've included the lossless png in the zip file). The arms and bow are rotated over 360 degrees, so this is using fusion's in game rotation and even that looks reasonable.
    Also what do you mean by a thin alpha? Less than 8 bits? If so see if increasing the alpha helps.
    ArcherLow.jpg
    Think alpha meaning there's a few pixels of aplha channel along the edges. I'm not sure how to increase it, to be honest.

    This is across all browsers, so something must not be optimized with my graphics. I have them in vector format so I can export them however is best, if I knew what that was.

  6. #6
    Clicker

    Fusion 2.5 DeveloperFusion 2.5+ DLCHTML5 Export ModuleiOS Export ModuleSWF Export Module
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)

    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    This may help... I've had the issue you're showing when the graphic is scaled and the colour of the transparent area is black. A quick way to check this is create an image which is a solid colour and then create a painted alpha mask in fusion (or just load the png in the attached zip file). This way when the image is scaled, slightly off pixel or rotated, the colour that bleeds through will be the object colour not black. If that fixes the problem then I can run through the export theory.
    Attached files Attached files

  7. #7
    Clicker Fusion 2.5 MacFusion 2.5 DeveloperHTML5 Export ModuleiOS Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)Universal Windows Platform Export Module (Steam)
    ratty's Avatar
    Join Date
    Apr 2012
    Posts
    1,135
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by JohnArtbox View Post
    This may help... I've had the issue you're showing when the graphic is scaled and the colour of the transparent area is black. A quick way to check this is create an image which is a solid colour and then create a painted alpha mask in fusion (or just load the png in the attached zip file). This way when the image is scaled, slightly off pixel or rotated, the colour that bleeds through will be the object colour not black. If that fixes the problem then I can run through the export theory.
    I thought that is what I was doing but I think I'm doing something wrong. I'm really not good with this graphics stuff. I've attached two of the images I'm working with. While they're both single colors, which I replace at runtime, I do notice the alpha edges are a bit more gradient than in the image you attached. Any insights?

    arm_07.png
    arm_05.png

  8. #8
    Clicker

    Fusion 2.5 DeveloperFusion 2.5+ DLCHTML5 Export ModuleiOS Export ModuleSWF Export Module
    Fusion 2.5 (Steam)Fusion 2.5 Developer (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)iOS Export Module (Steam)Universal Windows Platform Export Module (Steam)

    Join Date
    Dec 2010
    Posts
    167
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Try substituting the images in the zip and see if they make a difference.
    The images you posted are very low res for the screenshot you show. Are they scaled up in the game?
    Generally always use images to scale or scaled down.
    post a zip file with your images, otherwise the forum unfortunately converts them to jpegs.
    Attached files Attached files

  9. #9
    Clicker Fusion 2.5 MacFusion 2.5 DeveloperHTML5 Export ModuleiOS Export ModuleInstall Creator Pro
    Fusion 2.5 (Steam)Android Export Module (Steam)HTML5 Export Module (Steam)Universal Windows Platform Export Module (Steam)
    ratty's Avatar
    Join Date
    Apr 2012
    Posts
    1,135
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Oops, thought I replied to this thread ages ago! My mistake.

    Anyway, I figured out the issue is specifically with the replace color routine. In the attached picture, notice the edges of the two arms. Both arms are set to the same RGB values. The right arm is that color by default and the left arm had the RGB replaced to that value. Changing the RGB is leaving the colored edge.

    The images used are a single color only. I think the transparent edges are being bypassed during the replace color routine.


    test.png

Similar Threads

  1. Tips, Tricks, and Quirks I've Found using the HTML5 Runtime
    By DracisLooby in forum HTML5 Export Module 2.5
    Replies: 12
    Last Post: 20th July 2018, 10:26 PM
  2. HTML5 Ported App - Graphics On PC Monitor Not Good
    By drnebula in forum HTML5 Export Module 2.5
    Replies: 0
    Last Post: 26th December 2016, 03:44 AM
  3. Graphics unclear when moving too fast - tips?
    By Kentronisk in forum Fusion 2.5
    Replies: 5
    Last Post: 25th September 2015, 02:05 PM
  4. The single pixel lines are super crisp?
    By mobichan in forum HTML5 Export Module 2.5
    Replies: 7
    Last Post: 26th May 2015, 09:25 AM
  5. Replies: 9
    Last Post: 31st October 2014, 11:03 AM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •