GDR Forum Index
Podcast Podcast
Dev Dev Logs
Search Search
RSS RSS
Register Register
Log in Log in
Reply to topic GDR Forum Index -> Game Developer's Refuge -> Development Log - PoV's HTML5 PARTY!!! Page 1, 2, 3  Next
View previous topic :: View next topic  
Author Message
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10671
Location: Canadia
PostPosted: Thu Aug 14, 2014 10:00 pm    Post subject: Development Log - PoV's HTML5 PARTY!!! Reply with quote

*NOTE*: This is a split/fork of the thread "Development Log - Whatever the heck PoV is making"
*NOTE*: This frame here is "Simple", my gelHTML playground app. It may not necessarily be what I'm saying in the thread below it.



Alright. That should now work in Firefox on Windows.

The problem was simply I was using the Audio buffer wrong. The browsers give you a buffer of floats to write to, which I did, but Windows Firefox only understands values between -1 and +1. I was using values between 0 and 65535, which likely means my input values were getting saturated (i.e. if > +1 then +1, if < -1 then -1). Hence the popping (values getting saturated to max value of 1, then set to zero on pause).
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar


Edited by PoV on Fri Aug 15, 2014 11:37 am; edited 3 times
View user's profile Send private message
0xDB
Developer

Joined: 26 Dec 2005
Posts: 1637
Location: Your consciousness.
PostPosted: Fri Aug 15, 2014 12:46 am    Post subject: Reply with quote

Yay, works! It sounds like the pitch is a little higher in Chrome than in Firefox which might be related to timing issues of the browser itself.

Out of curiosity, I just tried Internet Explorer 11 where the canvas stays blank and the console shows a script error: "Unable to get property 'createScriptProcessor' of undefined or null reference" (main.js / Line 34)
_________________
0xDB
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10671
Location: Canadia
PostPosted: Fri Aug 15, 2014 6:34 am    Post subject: Reply with quote

Yeah, Web Audio is coming in IE 12. Might be in the beta.

http://status.modern.ie

You're right though. I should probably fail gracefully on IE 11.
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10671
Location: Canadia
PostPosted: Fri Aug 15, 2014 7:13 am    Post subject: Reply with quote

Alright fixed, and build now uses my Synth Library (which is just a cleaned up version of what I was doing before).

Looking in to it, the IE 12 beta currently DOES NOT have Web Audio support. So, no synthesis for now. For regular sound effect playback I'm using Howler.js, which may have a fallback to crappier old HTML5 Audio. So if I had used normal noise-making, you would be able to hear something in IE.


I've noticed there seems to be a bit of a focus issue with my code in IE. The iFrame seems to think it has focus, so it's beginning playback. Also, when the debugger is open, it seems to get stuck in a got-focus lost-focus infinite loop. Oops!
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
0xDB
Developer

Joined: 26 Dec 2005
Posts: 1637
Location: Your consciousness.
PostPosted: Fri Aug 15, 2014 7:32 am    Post subject: Reply with quote

Hm... would it be possible to pre-generate the wave data and then use the oldschool way(pre HTML5...whatever that was if there even is a way) of playing it?
_________________
0xDB
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10671
Location: Canadia
PostPosted: Fri Aug 15, 2014 7:37 am    Post subject: Reply with quote

Yeah, it might be possible to create a buffer, fill that buffer with your output, then use that buffer as the resource for an Audio element. The downside is it wont be realtime, and will have a fixed length, unless you're filling new buffers and sync them with the timer. The main problem with the old audio stuff was the playback latency (i.e. random, inconsistent across browsers). So even if I had and filled multiple buffers, there would probably be a gap.

I don't care enough about IE though. ;)

Plus I don't actually need synthesis. It's more that I'm making a framework for goofing off, and sometimes I goof off by synthesizing. Anyway, IE 12 will have it, and that's fine by me.
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
0xDB
Developer

Joined: 26 Dec 2005
Posts: 1637
Location: Your consciousness.
PostPosted: Fri Aug 15, 2014 8:06 am    Post subject: Reply with quote

Yeah... I'm thinking about ignoring IE as well for the most part or more generally speaking, I think I will ignore incomplete implementations of any of the HTML5 stuff in any browser since Chrome is available for free and does most of the stuff already and other browsers will fix themselves over time (and if they aren't... well then people will just stop using them and they'll die... good riddance). :)
_________________
0xDB
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10671
Location: Canadia
PostPosted: Fri Aug 15, 2014 8:21 am    Post subject: Reply with quote

Okay phew! I figured out my Internet Explorer focus problem (half of it anyway).

In IE, if you have the debug console open and you have given mouse focus to it, then any log message that happens thereafter will re-focus back on it. In my case, I have console.log's wired up to my window.onblur and window.onfocus events, meaning as soon as I click on my app, it logs, and I lose focus. The solution is to just click on something else, such as the titlebar or the script entry console (the line below the console).

Now the part I haven't figured out yet: Internet Explorer will return true if document.hasFocus() is the page, or is the iframe of a page. After clicking on and off, hasFocus will work the same as the other browsers (i.e. hasFocus ONLY if you are the page). So now I need a way of knowing if I'm in an iframe...
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10671
Location: Canadia
PostPosted: Fri Aug 15, 2014 8:43 am    Post subject: Reply with quote

Okay got it.

There are 3 notable global variables: parent, top, and self. 'parent' was less useful than I thought, but simply checking if 'top === self' will tell you if you're in an iframe or not (i.e. if true you are not).

That said, it means document.hasFocus() is only reliable for telling you that something in your tab has focus (thanks to IE). The window.onblur and window.onfocus events do work correctly, so setting a global state flag would do the trick.


So ideal usage, on application start confirm you are the top window (top === self), as well as if your tab has focus (document.hasFocus()), and call your onfocus function directly. Otherwise, call your onblur. In the actual events, set a flag to use instead of document.hasFocus(), if you even want to do something only when you don't have focus (such as a paused overlay).

Okay good. That's about all the love IE deserves from me right now: handling its focus event correctly. Now back to useful stuff.
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10671
Location: Canadia
PostPosted: Fri Aug 15, 2014 9:10 am    Post subject: Reply with quote


Okay, isolated the Synth stuff. This will be the new Synth Test. "Simple" at the top of the page will get normal sound effects.
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10671
Location: Canadia
PostPosted: Fri Aug 15, 2014 11:27 am    Post subject: Reply with quote

Okay, the Simple test at the top of this forum page is now a quiet blocky pixel scalar. The image is rendered in to a smaller sub-canvas (160x100), and drawn to the main canvas at some pixel power-of-two size (which just so happens to match my border).

The trick to this is that Canvas2D's have an imageSmoothingEnabled property (mozImageSmoothingEnabled on Firefox). They need to be set independently on each canvas for a fully blocky draw.

Caveats:
- The pixels along the edge of the images, if rotated/scaled/not on integer pixel bounderies will still be interpolated slightly.
- In Firefox, if a canvas is resized, then the smoothing property gets reset.


EDIT: I've decided to split this topic away from the "whatever I'm making" thread, since I seem to be rather active.
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
Alex
Developer

Joined: 05 Sep 2005
Posts: 1159

PostPosted: Fri Aug 15, 2014 11:44 am    Post subject: Reply with quote

yup.. chrome didn't have a smoothing property for a while but it was recently added sometime ago.
One weird thing is gifs will animate in.. i forget which.. chrome? but not in firefox.. or maybe its the other way around- if you simply draw them to canvas. But I doubt people would use gifs in their games when you can just make a spritesheet, and display the cells via code.
Also, one weird thing I discovered when making my pixel editor, is that there are differences in the anti-aliasing between chrome and firefox.. I never figured out why, but since my editor requires everything to remain 100% accurate between the users painting with each other, I couldn't rely on referencing pixels that had any anti-aliasing.. which was fine since it's a pixel-art editor. But I'm sure that could be an issue for some sort of application.

edit: I think I rely on making shapes for selection masks, but they have antaliasing.. and I have to round the pixel data so that they become the same on both browsers.. something tricky like that..
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10671
Location: Canadia
PostPosted: Fri Aug 15, 2014 11:54 am    Post subject: Reply with quote

Alex wrote:
yup.. chrome didn't have a smoothing property for a while but it was recently added sometime ago.

Ya, I remember that. I was working on this 3 years ago, and running in Chrome always made me sad. Now it doesn't even run properly in Chrome anymore! Works in Firefox though.

http://junk.mikekasprzak.com/BeneathDarkness/WIP/

Interestingly, I was able to get no-smoothing working in webkit browsers back then, just not Chrome. Times have changed though, and things are better.
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
Sirocco
Moderator

Joined: 19 Aug 2005
Posts: 9366
Location: Not Finland
PostPosted: Fri Aug 15, 2014 12:49 pm    Post subject: Reply with quote

Firefox 31 on Windows 7... neither window works for me. I see a border, but nothing else. Weeeeird.
_________________
NoOP / Reyn Time -- The $ is screwing everyone these days. (0xDB)
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10671
Location: Canadia
PostPosted: Fri Aug 15, 2014 1:01 pm    Post subject: Reply with quote

CTRL+F5 maybe? Perhaps it cached an older copy of something.

I'll go check the Windows Firefox myself, in case I broke something w/o realizing (Linux is totally fine).


EDIT: Nope, even Internet Explorer works fine over here (sans sound).

If you push F12 and click the console, that should give a more specific reason for the failure.
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
0xDB
Developer

Joined: 26 Dec 2005
Posts: 1637
Location: Your consciousness.
PostPosted: Fri Aug 15, 2014 1:04 pm    Post subject: Reply with quote

Sirocco wrote:
Firefox 31 on Windows 7... neither window works for me. I see a border, but nothing else. Weeeeird.
I can reproduce this only by blocking all scripts using the NoScript plugin... but well... that seems kind of obvious so it is probably not the problem.
_________________
0xDB
View user's profile Send private message Visit poster's website
Sirocco
Moderator

Joined: 19 Aug 2005
Posts: 9366
Location: Not Finland
PostPosted: Fri Aug 15, 2014 2:09 pm    Post subject: Reply with quote

Quote:

SecurityError: The operation is insecure. gelHTML.js:112
"gelHTML: DOM loaded."

_________________
NoOP / Reyn Time -- The $ is screwing everyone these days. (0xDB)
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10671
Location: Canadia
PostPosted: Fri Aug 15, 2014 3:28 pm    Post subject: Reply with quote

Okay, give that a try. I think it's getting upset because I'm accessing a stylesheet I shouldn't be allowed to.

I wish I could reproduce that.
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
Sirocco
Moderator

Joined: 19 Aug 2005
Posts: 9366
Location: Not Finland
PostPosted: Fri Aug 15, 2014 4:00 pm    Post subject: Reply with quote

Yes, that works now. I guess there's something in my security settings that's b0rking things? Weird how it's only me :|
_________________
NoOP / Reyn Time -- The $ is screwing everyone these days. (0xDB)
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10671
Location: Canadia
PostPosted: Fri Aug 15, 2014 8:38 pm    Post subject: Reply with quote


_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
Sirocco
Moderator

Joined: 19 Aug 2005
Posts: 9366
Location: Not Finland
PostPosted: Sat Aug 16, 2014 7:35 am    Post subject: Reply with quote

Cool. If you let it run long enough, it starts to have a 3D effect :)

edit: I'm not quite convinced this is the direction I want to go, but it's tempting. Web standards/support change entirely too quickly.
_________________
NoOP / Reyn Time -- The $ is screwing everyone these days. (0xDB)
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10671
Location: Canadia
PostPosted: Sat Aug 16, 2014 10:49 am    Post subject: Reply with quote

Sirocco wrote:
Cool. If you let it run long enough, it starts to have a 3D effect :)

:D. Ya, I started playing with a grid of boxes for fun, and after a few minutes it became clear I had to make it crazier. :). Was also listening to to Garth Knight (where the music is from), and it was all "WHOA, THIS IS NEARLY A DEMO". Lo and behold.

Anyways, this is one of the other reasons I'm making gelHTML. So I can try random stuff like this out on a whim. Sometimes it bares fruit.

(I can't legally publish that due to the music Copyright, but I've had my fun)

* * *

What this also tells me is I need a way to structure demos that DON'T auto-preload certain files until started. There's a 2-4 MB OGG/MP3 file needed by this demo, and that takes longer to load than a 12k Image file. Anybody visiting this post shouldn't be required to download that file, which the are now.

Experimentation == Good.
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10671
Location: Canadia
PostPosted: Sat Aug 16, 2014 11:17 am    Post subject: Reply with quote

Sirocco wrote:
edit: I'm not quite convinced this is the direction I want to go, but it's tempting. Web standards/support change entirely too quickly.

Heh, I'm not sure 'quickly' is the word I'd use. ;)

But ya, there are definitely some annoyances, and things that aren't done yet. The plus side is if you're willing to deal with it, you get the easiest possible user experience there is: clicking a link to play. Or heck, like you've seen in our posts, not even clicking a link but scrolling down a page. :)

One thing I'm starting to realize is a thing is that Web development is porting. I've been doing porting for years, so the idea that a machine or OS has a nuance to it is normal to me. I've long forgotten the comforts of just writing code to one platform, testing on that platform, and being done with it. Like we've seen in the thread, oddball compatibility issues like breaking the law of the secure sandbox sometimes show up. It's not something I wasn't aware of, but up until now it hadn't actually affected me. I'm probably strange, but I actually do like discovering little things like this. It means I know for sure that what I've written is more compatible.
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
0xDB
Developer

Joined: 26 Dec 2005
Posts: 1637
Location: Your consciousness.
PostPosted: Sat Aug 16, 2014 1:36 pm    Post subject: Reply with quote

Sirocco wrote:
I'm not quite convinced this is the direction I want to go, but it's tempting. Web standards/support change entirely too quickly.

PoV wrote:
But ya, there are definitely some annoyances, and things that aren't done yet. The plus side is if you're willing to deal with it, you get the easiest possible user experience there is: clicking a link to play. Or heck, like you've seen in our posts, not even clicking a link but scrolling down a page. :)
^ This. And... if we think about it in the way that Browsers are likely the single most used piece of software(or platform) on this planet, it seems safe to assume that development on that front is/will be going fast, so bugs and issues get solved quickly and we hopefully do not need to wait too long for missing features.
_________________
0xDB
View user's profile Send private message Visit poster's website
Gil
Developer

Joined: 14 Nov 2005
Posts: 2341
Location: Belgium
PostPosted: Sat Aug 16, 2014 2:50 pm    Post subject: Reply with quote

As you know, I'm also doing the HTML5 dance. One of the things I decided early on is that I only support IE9+. People are expected to have a decent PC with decent drivers if they want to play video games, but somehow, once you try doing it in a browser, we're supposed to support severely outdated software. Screw that. If you're too lazy to upgrade your browser to something decent, no games for you.
_________________
PoV: I had to wear pants today. Fo shame!
View user's profile Send private message Visit poster's website
Reply to topic GDR Forum Index -> Game Developer's Refuge -> Development Log - PoV's HTML5 PARTY!!! Page 1, 2, 3  Next

Use this link to get a Sign-On Bonus when you get started!

All trademarks and copyrights on this page are owned by their respective owners. All comments owned by their respective posters.
phpBB code © 2001, 2005 phpBB Group. Other message board code © Kevin Reems.