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 Previous  1, 2, 3  Next
View previous topic :: View next topic  
Author Message
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10781
Location: Canadia
PostPosted: Sat Aug 16, 2014 11:07 pm    Post subject: Reply with quote

Gil wrote:
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.

Ditto to that, but I'd go even as far as IE11 or IE12, the former because of WebGL support, and the later for Web Audio and Gamepads. I'm actually kind-of looking forward to IE12, not to use it myself, but it means the non-computer-savvy users will become potential users.

Still I'll probably dabble with compatibility here and there. Simple things really should work more places.


Something I'm noticing is there is a lack of a good reference that says what gaming centric features are absent from a browser. Mind you, there is a lot of crossover, but many things on caniuse don't matter, while things that do are sometimes omitted.

I suppose the 1st step is classifying what constitutes a gaming feature.
_________________
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: 10781
Location: Canadia
PostPosted: Sun Aug 17, 2014 4:56 pm    Post subject: Reply with quote

I did some benchmarking of ways you can check if something exists.

http://jsperf.com/not-not-vs-typeof

There are a few ways to do it, but the fastest way to do it is arguably one of two ways:

Code:
if ( myFunction ) {
}

if ( !!myFunction ) {
}

OH SHI! These examples will RAISE AN ERROR if myFunction doesn't exist. We'll come back to this.

Alternatively, you can use the "other" method: checking typeof.

Code:
if ( typeof myFunction !== "undefined" ) {
}

But that is a mouthful.

This however *WILL* work.

Code:
if ( window.myFunction ) {
}

if ( !!window.myFunction ) {
}

!! or 'not not' is a shorthand that, in this case, implicitly converts a function to a boolean (i.e. true if it exists), makes inverts the state of the boolean, the inverts it again. It's not a special operator, it's literally just plain old not ('!'), twice. On Chrome it's faster to not use !!, but on Firefox it *IS* faster to use !!.

If this works, then what's going on then?

Well, as it turns out, as long as a variable expression has a valid parent object, it will return a valid boolean expression. So in the above example, the global scope object (i.e. window) is used, and this results in a legitimate check if the 'global scope' contains a member named myFunction.

It should be noted that this works for functions, nulls, arrays, and objects. If myFunction was a number (0), a string (""), or a boolean (false), then this simplified check can backfire.

The following will fail for the same reasons as the first case.

Code:
if ( window.theParentObject.theChildObject ) {
}

if ( typeof theParentObject.theChildObject !== "undefined" ) {
}

In both cases, it's the attempt to access theChildObject that is killing it.

* * *

Other observations:
- window is a big object full of lots of things. It can take a very long time to check if something DOES NOT exist in the window scope. Chrome 2x as long, Firefox 30x as long. On an object with less things in it, Chrome is about the same whether it exists or not, and Firefox is about 4x slower.
- Worst case scenario object accesses (window), Chrome is 6x faster than Firefox on failure, but Firefox is 2x faster than Chrome on success. That said, there are some cases where Firefox 2x slower than Chrome on success. I think it may have to do with prototype function members of a type, but I'm not entirely sure.
- Chrome has the most consistent performance across the board.



- As we can see, Firefox is capable of performing better, but when it's at its worst, it really is the worst.



- on Internet Explorer, it's 300x faster to look up and find RAF than anything else. Probably means IE has a cache, and RAF is by default at the very top.

* * *

As a result of this information, I'm going to be making some slight style changes to gelHTML. I was originally copying some style things from howler.js, but clearly that was poorly informed.

* * *

Unrelated Reference: http://stackoverflow.com/questions/4862193/javascript-global-variables
_________________
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: 10781
Location: Canadia
PostPosted: Sun Aug 17, 2014 10:07 pm    Post subject: Reply with quote

Okay, some light reworking of my libraries to suit what my research has taught me. I'm also starting to hone in on what my minimum specs will be.

To be good though, I'm defining minimum specs as browser features I check for, and fail gracefully... Well, almost gracefully.


For now there will be a BASIC mode to gelHTML. My "ABSOLUTE MINIMUM SPEC" will be Canvas, image loading, and mouse/touch/keyboard input. It was going to be requestAnimationFrame, but after doing some digging it seems that's IE 10 and Android 4, when it could be IE9 and Android 2.1. That said I'm not actively testing on these old browsers. Its more that I know it should work if I check per-significant-feature. Some of the things I expect to do with gelHTML are super-simple programmatic animations, which should still totally work on old browsers.

I'm thinking that certain common but infrequent calls will trigger an unsupported error, such as loading a non-image. But I dunno. As I type this, I'm starting to wonder if I should just not have a BASIC mode at all.

Actually yeah. Let's just skip BASIC mode. That means IE 10, and Android 4.0 becomes the minimum spec. And in Androids case, its reasonable to expect Chrome to be available. So really, that makes the minimum spec IE 10 and Safari 6, because Chrome/Firefox will almost always be the (near) latest version.

In that case, its totally okay for me to check for Blob support. RAF support I'll still not check for, as its still pretty easy to emulate with setInterval, and some WebKit browsers like Android 4.0 don't have it. Actually really I'm not even concerned about Android 4.0 support, but with a RAF stub in there, I may get some oddball compatibility like 3DS or Smart TV browsers.

http://console.maban.co.uk
_________________
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: 10781
Location: Canadia
PostPosted: Sun Aug 17, 2014 10:43 pm    Post subject: Reply with quote

Unless specified, its assumed Firefox and Chrome have supported mentioned features for a long time.

- TypedArrays -- IE 10, Android 4, Safari 5 but slow until Safari 6
- related, but unsupported: SIMD.js https://github.com/johnmccutchan/ecmascript_simd
- I am concerned that SIMD.js operates on values more slowly that it needs to, due to excessive copies. I.e. it always returns instead of assigning members, like the typed arrays optimization.

- Blobs -- IE 10, Safari 6, and Android 4 only has BlobBuilder
- http://updates.html5rocks.com/2012/06/Don-t-Build-Blobs-Construct-Them
- Blob constructor Android Polyfill (change the exports thing) https://github.com/MobileChromeApps/mobile-chrome-apps/tree/master/chrome-cordova/plugins/polyfill-blob-constructor
- XHR blobs -- IE 10, Safari 7, Android ??
- Polyfill for Safari 6 and Android 4: https://github.com/MobileChromeApps/mobile-chrome-apps/tree/master/chrome-cordova/plugins/polyfill-xhr-features

- CustomEvent is not important, but here's an Android Polyfill: https://github.com/MobileChromeApps/mobile-chrome-apps/tree/master/chrome-cordova/plugins/polyfill-CustomEvent

- Web Sockets -- IE 10, Safari 6, Android 4.4 (so not-really, use chrome instead)
- Websockets and Blobs. http://blog.ericzhang.com/state-of-binary-in-the-browser/
- http://msdn.microsoft.com/en-ca/library/ie/hh673567(v=vs.85).aspx
- It sounds like WebSocket blobs are supported, but MDN is confusingly out of date

- WebRTC -- Current Chrome and Firefox only. Not for IE 12 (13 at the soonecom
- You want PeerConnection and Data Channels.
- http://iswebrtcreadyyet.com
- https://developer.mozilla.org/en-US/docs/Web/Guide/API/WebRTC/WebRTC_basics
- Still not clear if FF+Chrome interoperability is working correctly yet. Again, old MDN docs say otherwise.

- Gamepad API
- TODO: function that converts input to better layout. Button remap json as input too.
- TODO: Keyboard to fake Gamepad API snapshot

- Vector Math
- consider this: http://media.tojicode.com/sfjs-vectors/
- collision primitives too


- NodeJS static gz serve
- http://stackoverflow.com/questions/23967270/serve-static-gzip-files-using-node-js
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar


Edited by PoV on Mon Aug 18, 2014 7:37 am; edited 7 times
View user's profile Send private message
0xDB
Developer

Joined: 26 Dec 2005
Posts: 1651
Location: Your consciousness.
PostPosted: Sun Aug 17, 2014 11:24 pm    Post subject: Reply with quote

This is all relevant to my interests. :)

Do you use any fancy IDE for your Javascript/HTML5 stuff or just any old text editor? I've been using notepad++ so far but I think stuff could be a little more comfortable with things like autocomplete and an object explorer or something.
_________________
0xDB
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10781
Location: Canadia
PostPosted: Sun Aug 17, 2014 11:34 pm    Post subject: Reply with quote

Naw, I dont IDE. I use the same text editor I've been using for the past 15 years: UltraEdit.

* * *

Note to self: Put the Android Browser Polyfill stuff in gelLegacy.js. No need to fatten gelHTML.
_________________
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: 10781
Location: Canadia
PostPosted: Mon Aug 18, 2014 6:53 am    Post subject: Reply with quote

Okay. Ha, I should probably read the crap I posted here last night, to know what to do today. ;)
_________________
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: 10781
Location: Canadia
PostPosted: Mon Aug 18, 2014 9:09 am    Post subject: Reply with quote

- Object.defineProperty is a thing apparently. Lets you make getter and setters.
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
- http://stackoverflow.com/questions/17859317/javascript-prototype-constant-declaration
_________________
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: 10781
Location: Canadia
PostPosted: Mon Aug 18, 2014 10:30 am    Post subject: Reply with quote



Not that impressive a screenshot, but I have a JSON and Text loader now that, if they were big enough, I could track the progress of. Really, this stuff isn't that complicated, but last time I did the JavaScript thang, I cheated as much as possible (i.e. map file was a JSON export I included directly in my code). I'ts nice when something as wild as JavaScript becomes more and more like normal.

Onward to binary, Image progress tracking (a binary wrapper), and then to add tracking to audio-file loading as well.
_________________
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: 1651
Location: Your consciousness.
PostPosted: Mon Aug 18, 2014 11:52 pm    Post subject: Reply with quote

just stumbled across this: http://robertnyman.com/javascript/

It lists some javascript features and browser compatibility for them.
_________________
0xDB
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10781
Location: Canadia
PostPosted: Tue Aug 19, 2014 1:54 am    Post subject: Reply with quote

Nice. I also like:

http://caniuse.com
https://developer.mozilla.org/en-US/docs/Web/API

Another favorite when I have to do DOM stuff, but there are a lot of other useful snippets too.

http://youmightnotneedjquery.com/
_________________
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: 1651
Location: Your consciousness.
PostPosted: Tue Aug 19, 2014 12:14 pm    Post subject: Reply with quote

Great. Bookmarks added!
_________________
0xDB
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10781
Location: Canadia
PostPosted: Tue Aug 19, 2014 12:43 pm    Post subject: Reply with quote

Spent the morning and afternoon on Ludum Dare obligations, but mainly PR stuff. Unfortunately PR really means a lot of goofing off. ;)

Alright, about to start on this for today. Running out of time. I want this ready for Ludum Dare, and I'm going to be VERY distracted Friday.


Anyway, like I said above, I did eventually add binary loading. I also wrapped the PNG loading in blobs, so I load a Blob from disk, and then feed it to an 'Image().src'. Haven't looked at the audio file tracking yet. I probably should, to make it work nicely with my preloader stuff.

Everything I load is now wrapped in a GelAsset() type. It's an object that knows how much (%) it has loaded (where applicable), and contains a .data property with the actual data. This meant updating any native context calls I made to use MyAsset.data instead of just MyAsset.

A minor design thing, but something I can make all my wrapped functions do automatically (access .data).

TODO LIST:
-
_________________
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: 10781
Location: Canadia
PostPosted: Tue Aug 19, 2014 9:46 pm    Post subject: Reply with quote

Ha, got interrupted after starting that post, then spent most of the day distracted. Yikes. At this rate I'm not going to be ready for the weekend.

Lets try this again:

Code:
TODO LIST:
- Vector Math (*2D, 3D)
- Matrix Math (*2D, *3D, 4D)
- Gamepad to GelPad *
- Keyboard to GelPad *
- GelAsset Audio Wrapper
- FullScreen Toggle
- Proper "Load Groups" (specify the Target) ?
- Chrome 'initial display' bug, introduced after moving to blob loader
- Graphics Library *
    [x] Clear
    [ ] Draw Sprite
    [ ] Draw Radial Shapes (Square, Cross, Circle)
    [ ] Draw Line Shapes (Line, Rectangle, Lines, Polygon [filled])
- Collision Primitive Library *
    [ ] Point vs Point
    [ ] Circle vs Circle
    [ ] AABB vs AABB
    [ ] Each other
- Sprite Library (Sheet Slicer, Animation Building) *
- Map Library (Load, Draw, Crop)
- Collision Primitive vs Map
- Fonts (Load... can just ignore confirmation since it's annoying)
- Delta Time Game Loop
- NodeJS - Math Library Support - http://openmymind.net/2012/2/3/Node-Require-and-Exports/
- NodeJS - Simple Relay Server
- NodeJS - Server Loop

I've tried putting stars besides things I consider necessary.

* * *

EDIT: I've started stubbing out my Math library, but something I want to make sure I do right is creating it in such a way that it works in both the Browser and in Node.js.

I'm kind of tired, so I'm just going to drop some links I was reading.

http://openmymind.net/2012/2/3/Node-Require-and-Exports/
http://stackoverflow.com/questions/4133114/global-object-in-node-js
http://nodejs.org/api/globals.html#globals_global
http://stackoverflow.com/questions/5311334/what-is-the-purpose-of-node-js-module-exports-and-how-do-you-use-it
http://stackoverflow.com/questions/4224606/how-to-check-whether-a-script-is-running-under-node-js

Main thing was "how I should create globals". A nice solution was to create a top-level variable without any var keyword. Except...

...I was also looking in to JavaScript strict mode, where that var solution becomes illegal.

http://stackoverflow.com/questions/6888570/declaring-variables-without-var-keyword
http://stackoverflow.com/questions/9397778/how-to-declare-global-variables-when-using-the-strict-mode-pragma
http://chrisfrost.com/javascript/strict-javascript-for-nodejs/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode

I've been using 'global' as a synonym for window so far in my browser code. As far as I an tell it's never defined in the browsers, but it exists in node.js, and is usable as a global namespace. That said, some of the stuff I've read suggests you can't expect to find typically global functions in global, but my quick check shows the important timer stuff seems to be there. :)

It's late, but I think the following will be a browser+node.js strict mode friendly way to provide a way to write to the global object.

Code:
"use strict"
if ( typeof window !== "undefined" )
    window.global = window;

and assign anything you want global to the global object.

Code:
global.gelMyFunction = function() { ... }

I haven't tested this much, just basic compatibility. It sounds like its working.

The recommended node.js way to do things is to use module.exports with require() to send things back to the main app. That's going to ruin my syntax though.

* * *

Other Links I'm Looking at.

https://developer.mozilla.org/en-US/docs/Web/API/Float32Array
http://media.tojicode.com/sfjs-vectors/#32
https://github.com/johnmccutchan/ecmascript_simd/blob/master/src/ecmascript_simd.js

Probably going to go the sfjs way (no wasteful create syntaxes), with getters and setters for the x,y methods. Then later, once SIMD.js becomes real, those functions can be wired up to the vector math library.
_________________
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: 10781
Location: Canadia
PostPosted: Wed Aug 20, 2014 8:09 am    Post subject: Reply with quote

Quick look at Node-Webkit, which combines Node.JS with Chromium.

https://github.com/rogerwang/node-webkit

I'm not particularly planning to use it, but I did want to briefly make sure I could, and see if I could differentiate. The way I'm writing my libraries, I'm using the existence of 'window' to determine if I'm using node.js or a browser. Obviously, that will stop working in a combined nodejs+browser environment.

https://gist.github.com/thcreate/5771471
https://groups.google.com/forum/#!topic/node-webkit/A6F-cBKW6Es
https://github.com/rogerwang/node-webkit/wiki/How-to-package-and-distribute-your-apps

Back to normal stuff.

EDIT: Apparently "Blah instanceof SomeClass" is the same as "Blah.constructor === SomeClass".

http://stackoverflow.com/questions/6973866/javascript-get-type-instance-name

EDIT2: Blah

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain
http://stackoverflow.com/questions/10592753/how-to-define-setter-getter-on-prototype
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar


Edited by PoV on Wed Aug 20, 2014 3:19 pm; edited 1 time
View user's profile Send private message
0xDB
Developer

Joined: 26 Dec 2005
Posts: 1651
Location: Your consciousness.
PostPosted: Wed Aug 20, 2014 3:18 pm    Post subject: Reply with quote

PoV wrote:
EDIT: Apparently "Blah instanceof SomeClass" is the same as "Blah.constructor === SomeClass".
That's odd because it should not be:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/instanceof

It would for example also be true if Blah is of SomeOtherClass which inherited from SomeClass (except when the prototype of the constructor has been manipulated which just brought my attention to a bug I've got in my OO code which breaks instanceof to not work as expected on my objects created from customized prototypes).
_________________
0xDB
View user's profile Send private message Visit poster's website
Gil
Developer

Joined: 14 Nov 2005
Posts: 2341
Location: Belgium
PostPosted: Wed Aug 20, 2014 6:33 pm    Post subject: Reply with quote

PoV wrote:
EDIT: Apparently "Blah instanceof SomeClass" is the same as "Blah.constructor === SomeClass".
Yeah, that's not true, though at for all native stuff, it is, kinda. It's pretty easy to figure out though if you make a quick unit test.

Basically, the instanceof operator goes down the prototype chain of the object to compare it with the prototype property of the constructor. A polyfill is basically this:

Code:
function isInstanceOf(obj, ctor) {
  var proto = obj;
  while (proto !== null) {
    if (proto = ctor.prototype) return true;
    proto = Object.getPrototypeOf(proto);
  }
  return false;
}


There's also the Object.prototype.isPrototypeOf method available for all objects, which is basically this:
Code:
Object.prototype.isPrototypeOf = function(obj) {
  var proto = obj;
  while(proto !== null) {
    if (proto === this) return true;
    proto = Object.getPrototypeOf(proto);
  }
  return false;
}

_________________
PoV: I had to wear pants today. Fo shame!
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10781
Location: Canadia
PostPosted: Wed Aug 20, 2014 7:17 pm    Post subject: Reply with quote

Yeah that sounds more like it. My main thing was I didn't know .constructor was available to check against (since you lose prototype after instantiating). I really don't do a lot of inheritance anymore, so there's potential to save a few cycles by checking constructor directly.

EDIT: Yes.

Chrome: 2x faster on success, 2x slower on failure
Firefox: 50% faster on success, 5x faster on failure

http://jsperf.com/instanceofudge

Chrome is amazingly consistent. Instanceof costs basically the same no matter what you're testing (successes, failures, parents and children). In Firefoxes case, it's the === test that is amazingly consistent (50% faster than the best instanceof speed, then instanceof cries on recursion and failure).
_________________
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: 10781
Location: Canadia
PostPosted: Thu Aug 21, 2014 12:57 pm    Post subject: Reply with quote

Just want to show a mockup of what I want to do for my preloader.

Last year designed a new logo for me (Sykronics), and it features this "floating eye with teeth" character. I'd like to create a little animation involving that character. This:



Character pops out (squash+stretch from nothing), background fades to black, and little dots pop up beside him pulsing and showing progress, as he hovers, pulses, and blinks.

After running an optimizer, I have a 4k uncompressed SVG file of the character, that squishes down to 888 bytes once gzipped. I do kinda wish the file was smaller though. ;)


And instead of the popup "paused" that I have now, do something like this:



(Arrow was Gimped in. Edges would be cleaner).


Later on, it would be nice to do something with the character for a "PlayStation style" loader. I.e. something in the lower right corner of the screen during gameplay load times. That can be a lot more elaborate, maybe a Spine animation, as anything that would use it would be game-engine proper.
_________________
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: 10781
Location: Canadia
PostPosted: Thu Aug 21, 2014 6:20 pm    Post subject: Reply with quote

Using this SVG Optimizer.

http://petercollingridge.appspot.com/svg-editor/

Though the majority of what I'm doing to optimize is converting strokes to paths in Inkscape, then feeding it to that. My SVG is down to 2.7k now that I've removed redundant data, but it's going to grow a bit since I'm going to add the Arrow.

When I'm done, I should have a sprite sheet, but an SVG sprite sheet. It seems treating SVG the same as regular images is the cleanest cross platform way to draw them to Canvas. Plus it means if I want a PNG version (WebGL), it's just a simple export.

EDIT: Oh right, I should cite my source, so I don't forget it.

http://getcontext.net/read/svg-images-on-a-html5-canvas
_________________
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: 10781
Location: Canadia
PostPosted: Thu Aug 21, 2014 9:02 pm    Post subject: Reply with quote



Testing eye guy.

This sort of thing might make a good 'PlayStation' animation. Just refine it more, blinking, maybe add some things it flies around (grass sprouts, planets, etc).

Sprite sheet is 4.2k (1.6k gzipped) with the 4 parts (outline, body, whites, pupil) as well as 4 variants (play, pause, error, x-pupil).


EDIT: Trying to get a feel for how large things are, so I minified a few a of my files with UglifyJS2.

https://github.com/mishoo/UglifyJS2

6987 - gelHTML.min.js -- 19296
4002 - gelCanvas.min.js -- 8611
903 - gelAudio.min.js -- 2709
12089 - howler.min.js
----------------------------------------
23981 ----------- 42705

2019 - main.min.js (Eyebox) -- 3369
4183 - eyesheet.svg
541 - index.html
----------------------------------------
6743 ------------ 8093

Total:
30724 ------------- 50798

So as things stand, a basic demo with sound support is 50k raw, or 30k minified. Audio playback is taking up 42% of the downlodad size (without any audio files mind you). Would be 17732 bytes w/o audio.

With some work that minification could be optimized more, but things will continue to grow, so no worries.


Of course, everything can still be gzipped, obfuscated, packed in to a single file, etc. And well, it's not like download size is an issue these days anymore. Keeping a game under 1 MB means 1000 plays per GB, or 1 million plays per TB of bandwidth.

Amazon would charge you about $120 for 1 TB of CDN bandwidth, but it sounds like you can get non-CDN bandwidth for a lot cheaper. A $200 server package I quickly looked at had 100TB.
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar


Edited by PoV on Thu Aug 21, 2014 11:45 pm; edited 9 times
View user's profile Send private message
0xDB
Developer

Joined: 26 Dec 2005
Posts: 1651
Location: Your consciousness.
PostPosted: Thu Aug 21, 2014 11:13 pm    Post subject: Reply with quote

Cool stuff. I will dissect your tests to learn a thing or two when the time comes. :)

To me Eye Guy looks a bit depressed/grumpy or even angry with the horizontal bar on the upper eyelid.
_________________
0xDB
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10781
Location: Canadia
PostPosted: Thu Aug 21, 2014 11:46 pm    Post subject: Reply with quote

Intentional. :). Here's the logo.


_________________
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: 1651
Location: Your consciousness.
PostPosted: Fri Aug 22, 2014 12:05 am    Post subject: Reply with quote

Ok but just for the challenge involved I tried to make it smile:

But making a single eyed, mouth-less creature appear to be smiling seems to be no easy task. :/
_________________
0xDB
View user's profile Send private message Visit poster's website
PoV
Moderator

Joined: 21 Aug 2005
Posts: 10781
Location: Canadia
PostPosted: Fri Aug 22, 2014 12:22 am    Post subject: Reply with quote

Yeah, you'd have to extrude something cheek-like to give it an actual smile. It does have the fangs along the bottom, so that's where I'd start.

Eyes alone, you can do a lot of emotions, but I don't think happiness is one of them.

EDIT: I'm wrong. I forgot about the anime style upside-down U eyes. n_n or ^_^
_________________
Mike Kasprzak
'eh whatever. I used to make AAA and Indie games | Ludum Dare | Blog | Tweetar
View user's profile Send private message
Reply to topic GDR Forum Index -> Game Developer's Refuge -> Development Log - PoV's HTML5 PARTY!!! Page Previous  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.