|
I'm trying to draw some sprite stuff to a canvas but I'm having troubles getting it to scale nicely. I have an offscreen 320x240 canvas that I do my drawing to and then I draw it to the visible canvas scaled up: code:
It looks about the same when doing scaling as above or when using the context.scale() function. I've tried to set the smoothingEnabled property to false and some css stuff I found here The sprite is drawn with drawImage as usual, am I missing something with that call? Does it not draw "pixel perfect"?
|
# ? Jan 13, 2018 16:31 |
|
|
# ? Jun 5, 2024 09:16 |
|
netcat posted:I'm trying to draw some sprite stuff to a canvas but I'm having troubles getting it to scale nicely. From my research while dealing with the canvas, it doesn't do scaling very well. Phone posting right now so I can't link but I recommend searching for canvas scaling algorithms.
|
# ? Jan 13, 2018 19:26 |
|
netcat posted:I'm trying to draw some sprite stuff to a canvas but I'm having troubles getting it to scale nicely. Set your canvas image-rendering attribute to pixelated or crisp-edges. If you or your target audience browsers do not have the feature, you'll need to manually scale the image by using some imagedata manipulation. https://stackoverflow.com/a/29635944 Lemon King fucked around with this message at 19:44 on Jan 13, 2018 |
# ? Jan 13, 2018 19:32 |
|
Lemon King posted:Set your canvas image-rendering attribute to pixelated or crisp-edges. I'm actually using image-rendering: pixelated in the screenshot I posted. It definitely looks different than when not using it though, so I'm suspecting that it's when drawing to the offscreen canvas the images get mangled for whatever reason. edit: one more google search reveals that there are problems when setting the canvas size via CSS since everything is drawn with a default size of 300x150. I'm setting the size to 100% with CSS so I guess this might be the problem. Guess I'll have to do a workaround. netcat fucked around with this message at 20:29 on Jan 13, 2018 |
# ? Jan 13, 2018 20:12 |
|
Dumb Lowtax posted:edit: I did it. Is this how one is supposed to write a bug report? https://bugs.webkit.org/show_bug.cgi?id=181011 So this bug, which I reported to the Safari Bugzilla, got assigned to 3 people the next day and then never touched again. That doesn't inspire much hope. I need their bug to be fixed or my website launch can't happen, since it would run everywhere but iPhones and iPads for no reason and that'd be dumb. I want visitors to be able to edit code on my site from their phones and run the 3D animations. My whole animation library depends on subclassing TypedArrays, which triggers this Safari-only bug. Is there anything I can do to draw more attention to a Bugzilla report once all activity has apparently stopped on it?
|
# ? Jan 13, 2018 20:17 |
|
Dumb Lowtax posted:So this bug, which I reported to the Safari Bugzilla, got assigned to 3 people the next day and then never touched again. That doesn't inspire much hope. I need their bug to be fixed or my website launch can't happen, since it would run everywhere but iPhones and iPads for no reason and that'd be dumb. I want visitors to be able to edit code on my site from their phones and run the 3D animations. My whole animation library depends on subclassing TypedArrays, which triggers this Safari-only bug. I would be super surprised if anything happens on it in less than a few months and then it will take many months for it to roll out to all browsers.
|
# ? Jan 13, 2018 20:21 |
|
Dumb Lowtax posted:So this bug, which I reported to the Safari Bugzilla, got assigned to 3 people the next day and then never touched again. That doesn't inspire much hope. I need their bug to be fixed or my website launch can't happen, since it would run everywhere but iPhones and iPads for no reason and that'd be dumb. I want visitors to be able to edit code on my site from their phones and run the 3D animations. My whole animation library depends on subclassing TypedArrays, which triggers this Safari-only bug. Too bad, it won't happen. Make a wrapper class that contains a TypedArray and exposes the bits of it you need and the stuff you're adding. Roadie fucked around with this message at 23:56 on Jan 13, 2018 |
# ? Jan 13, 2018 23:46 |
|
netcat posted:edit: one more google search reveals that there are problems when setting the canvas size via CSS since everything is drawn with a default size of 300x150. I'm setting the size to 100% with CSS so I guess this might be the problem. Guess I'll have to do a workaround. There are two sizes you have to care about with canvas: the *canvas* size, which is specified via the canvas's width and height attributes/properties; and the *element* size, which is specified via CSS. If you want pixel-perfect rendering, make sure you set both properly, for instance: code:
or code:
Oh, and when it comes to pixel-perfect drawing, take care that with some of the drawing primitives on a canvas you should offset your pixel coordinates by 0.5 because you want to specify the *center* of your target pixels rather than their corners.
|
# ? Jan 14, 2018 02:11 |
|
biznatchio posted:There are two sizes you have to care about with canvas: the *canvas* size, which is specified via the canvas's width and height attributes/properties; and the *element* size, which is specified via CSS. If you want pixel-perfect rendering, make sure you set both properly, for instance: Yeah I ended up setting the canvas width/height to window.innerWidth/Height in a resize event callback since I want a "full screen" canvas. Seems to work fine now.
|
# ? Jan 14, 2018 10:10 |
|
netcat posted:I get the result as on the right while the left is about how it should look obviously: I fought with this for a while on Caliber. Compare the tank, capture circle, and base to the base boundary lines. Caliber is a single canvas and I'm now fairly certain that's a terrible way to do HTML5 games. The answer is ... don't draw sprites to canvas. Make them DOM objects and enable/disable/transform them with CSS style properties. We're both trying to treat the canvas like a framebuffer when really it should just be for preparing sprite images or other elements at a pixel-perfect scale and then letting CSS do the stuff. That'll take better advantage of the browser anyway and you don't have to control blanking/redraw anymore, just update your DOM objects. Ranzear fucked around with this message at 01:04 on Jan 15, 2018 |
# ? Jan 15, 2018 01:01 |
|
Dumb Lowtax posted:So this bug, which I reported to the Safari Bugzilla, got assigned to 3 people the next day and then never touched again. That doesn't inspire much hope. I need their bug to be fixed or my website launch can't happen, since it would run everywhere but iPhones and iPads for no reason and that'd be dumb. I want visitors to be able to edit code on my site from their phones and run the 3D animations. My whole animation library depends on subclassing TypedArrays, which triggers this Safari-only bug. Roadie posted:Too bad, it won't happen. Make a wrapper class that contains a TypedArray and exposes the bits of it you need and the stuff you're adding. I don't think I have that as an option. People use this data type of my library like an array and expect all the methods of Array to be there. I could indeed manually type every single method of the built-in Array type as a method of my subclass, where each method just falls through to act upon its TypedArray data member, but it sounds slow and would drastically increase the size of the cleanest class in my library (the selling point of which is it's very short, so students still feel like they're using vanilla JavaScript with a couple small array wrappers for math). That's already a sacrifice, but the actual dealbreaker is that even this workaround is limited by the lack of operator overloading in JavaScript, so the change would still break all code that depends on square bracket notation for indexing into any of these array-like variables. People already use this code library and there's programs out there in the field that depend on it, and some of them always pull the newest copy of the .js file off my server. There's got to be a fix that doesn't involve changing my API or adding clutter. Like Safari just removing their drat bug. ----- I think I'm actually pretty stuck in between a rock and a hard place here. I never exactly wanted to depend on something so obscure and specific so much (the .of() method in subclasses of TypedArrays) that turns out to not work properly at all on Safari. In fact I got forced down this narrow road into doing something that's apparently rare because of another weird aspect of TypedArrays. Check this out -- in modern JavaScript, if you do the following lines: code:
code:
Why is that happening? By design, the new() operator for arrays is supposed to handle the single-argument case by interpreting it as an array size, but if you do give it multiple arguments, it knows that you mean them to be the entries of your array. Now, TypedArrays are supposed to be syntactically the same as arrays in almost all regards, yet that functionality isn't. Long ago before TypedArrays, using my library involved tons of syntax like "new Vec( 3,4,5 )" where Vec extended Array, but when I upgraded it to extend TypedArrays instead, that syntax no longer worked. Programs crashed because they would say things like "new Vec( 0,0,0 )" to initialize a vector and that suddenly would come back completely empty due to the different superclass. I had to change everything throughout all code to Vec.of( 0,0,0 ) instead, which is more awkward, and I had to tell everyone else to do that too, and now that triggers this obscure bug in Safari, causing my library to suddenly no longer work on iPhones and iPads only. Happy Thread fucked around with this message at 00:15 on Jan 16, 2018 |
# ? Jan 15, 2018 21:38 |
|
You can detect Vec.of not working in a try/catch and wrap it in a Proxy that should let you fake up whatever interface you need only when you need to do that. Yes, that's probably a small performance hit, but you're already taking a massive perf hit using JS over, say, C, for the benefit of using a less picky environment and tradeoffs are unavoidable. Yes, that's more code that shouldn't need to be there to deal with a browser's shortcomings, but compatibility shi[v|m]s are something we've all been dealing with in this ecosystem pretty much since the beginning, and they're not going to go away anytime soon. E: heck if it's just .of you need, you can monkeypatch that straight onto the 'class' if it's not there unless I'm missing something? Munkeymon fucked around with this message at 22:13 on Jan 15, 2018 |
# ? Jan 15, 2018 22:08 |
|
Proxies are not in my toolset yet and I will be reading a lot about them now.Munkeymon posted:E: heck if it's just .of you need, you can monkeypatch that straight onto the 'class' if it's not there unless I'm missing something? Now that's an idea. I had previously only tried the other way - overriding the constructor of the class, to try to change the behavior of new(), since new()'s odd behavior was my original problem. It didn't work. Overriding .of() instead might work though. It's definitely possible, and replacing .of() something I've tried for hard-coding special cases for small Vecs as a performance boost. I took it out but I should try it again for this iPhone bug too! Inside .of() if it's safari I could just resort to doing the notation with square brackets I just discovered in the previous post, which does work: "new Vec([ blah blah blah ])".
|
# ? Jan 15, 2018 23:35 |
|
Does anyone have any explanation for what started this, the problem itself in JavaScript: conflicting behavior of new() in TypedArrays vs. Arrays? Why do TypedArrays ignore their arguments past the first, yet Arrays use them to populate themselves?
|
# ? Jan 15, 2018 23:38 |
|
I'd guess TypedArray has a single constructor with that one argument being size. Edit: no, it's variadic. But differently from arrays https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray
|
# ? Jan 15, 2018 23:48 |
|
So TypedArray is variadic if it detects an array as the first argument, but not if you just start giving it scalars? But... that's dumb right? Why'd they not make it able to do what Array can when multiple scalars are passed in?
|
# ? Jan 16, 2018 00:13 |
|
TypedArray has 1 and 3 argument constructor variants, Array only has 1 and n length.
|
# ? Jan 16, 2018 00:24 |
|
Right, so the constructor of TypedArray is clearly already putting up with the performance hit of checking its arguments each time, even if there's only one, to see if there's an array or a scalar in the first slot. What's the benefit of, if the scalar case, making TypedArray ignore any remaining arguments, instead of making use of them like Array does, and therefore making the behavior consistent with Array? Why didn't the creators of es6 do that, so that code that uses either Arrays or TypedArrays as the underlying type can be interchangeable, and the superclass switched out if necessary? Isn't it dumb not to?
|
# ? Jan 16, 2018 08:45 |
|
Dumb Lowtax posted:Isn't it dumb You're talking about Javascript, so the answer to this question is always "yes".
|
# ? Jan 16, 2018 10:51 |
|
Dumb Lowtax posted:Right, so the constructor of TypedArray is clearly already putting up with the performance hit of checking its arguments each time, even if there's only one, to see if there's an array or a scalar in the first slot. What's the benefit of, if the scalar case, making TypedArray ignore any remaining arguments, instead of making use of them like Array does, and therefore making the behavior consistent with Array? Why didn't the creators of es6 do that, so that code that uses either Arrays or TypedArrays as the underlying type can be interchangeable, and the superclass switched out if necessary? Isn't it dumb not to? When you are building on a foundation that was written in ten days by one guy, you just do your best.
|
# ? Jan 16, 2018 15:38 |
|
Dumb Lowtax posted:Proxies are not in my toolset yet and I will be reading a lot about them now. JavaScript code:
|
# ? Jan 16, 2018 17:32 |
|
Murrah posted:Has anyone done Wes Bos's Node course by chance? Any thoughts? Yes, like all his courses it's good stuff.
|
# ? Jan 16, 2018 21:08 |
|
I want to build a node module that uses websockets and I want it to work on both the server and in the browser. On the server I'll need to require websockets but in the browser use the native implementation. Is there any way to do that? Does it require two builds? Maybe a required websocket parameter on instantiation passed by the user?
|
# ? Jan 22, 2018 06:17 |
|
Socket.io does that for you, fundamentally WebSockets are quite different in the browser to Node.JS as one yields errors synchronously and the other asynchronously. It sucks.
|
# ? Jan 22, 2018 06:50 |
|
Great now I don't care about building it.
|
# ? Jan 22, 2018 12:20 |
|
ws works on both ends, iirc. I don't get why you care when each will be doing wildly different things with the websocket anyway.
|
# ? Jan 22, 2018 23:50 |
|
Ranzear posted:ws works on both ends, iirc. I don't think he's talking about making a Client/Server pair, I think he wants to make a module that does the same thing, but used in different contexts. Like a web client that talks to a server, and a Node client that does the same thing.
|
# ? Jan 23, 2018 03:08 |
|
If the two were wildly different then I wouldn't be concerned about building a single library. Yawn. I'm working on a subprotocol implementation.
|
# ? Jan 24, 2018 04:44 |
|
Skandranon posted:I don't think he's talking about making a Client/Server pair Nolgthorn posted:I want to build a node module that uses websockets and I want it to work on both the server and in the browser. Should be able to write all your logic to just be string I/O from either the module or a web worker and swap out whichever. Caliber is all shared libs and each batch of bots is a node.js instance using a single websocket but the same game state and input data as the client. Ranzear fucked around with this message at 20:08 on Jan 24, 2018 |
# ? Jan 24, 2018 20:03 |
|
I decided to write a separate lib for the browser implementation anyway. Since just the build environment alone is so different, I noticed a lot of package maintainers do it this way regardless. I'm repeating a lot of code between the two, but the library isn't so huge it isn't that big a deal. Essentially I have a src directory and a file in it that takes an argument like so: code:
code:
Can't figure out how to tell my build environment to just spit it out as is without any additional stuff. I'm using rollup.js
|
# ? Jan 27, 2018 05:30 |
|
I trimmed it down a little bit using an es6 import/export in index.js It bundles just fine into IIFE. But now I wonder, if index.js is using es6 exports and the lib is using commonjs, can bundlers like Browserify and Webpack handle it. Something I've never thought about before, I suspect they can. I imagine all kinds of client side libraries use any combination.
|
# ? Jan 27, 2018 18:56 |
|
Trying to brush up on Ember by running through the "Rentals" tutorial -- https://guides.emberjs.com/v2.18.0/tutorial/ember-data/ -- and I'm at the phase of using Ember Data to pull back fake data using the Mirage addon for the purpose of testing. Awesome. Makes sense. What doesn't is that whatever is coming back from this Mirage request is wrong, and gives me an 'Assertion Failed: Encountered a resource object with an undefined type'. What I don't seem to be able to do is hit my app at the endpoints this Mirage add on sets up to get a look at what is coming back from these requests. These are only accessible by the application? How am I supposed to troubleshoot the Mirage endpoints? How can I verify if Mirage is even configured and working correctly? Craziness.
|
# ? Feb 4, 2018 15:22 |
|
GeorgieMordor posted:Trying to brush up on Ember by running through the "Rentals" tutorial -- https://guides.emberjs.com/v2.18.0/tutorial/ember-data/ -- and I'm at the phase of using Ember Data to pull back fake data using the Mirage addon for the purpose of testing. Awesome. Makes sense. You can run the application in development mode with mirage enabled and look at the requests in the console log
|
# ? Feb 4, 2018 19:31 |
|
Is there any alternative to using npmjs as a Javascript developer? Is an alternative even possible since npm seems to come bundled with node. That feels like putting all our eggs in one basket. For an ecosystem especially that seems to pride itself on having a million different ways to render a checkbox.
|
# ? Feb 11, 2018 20:24 |
|
There’s yarn: https://code.facebook.com/posts/1840075619545360
|
# ? Feb 11, 2018 20:45 |
|
Keep in mind Yarn is still talking to the main NPM registry, and it uses Node as well, so I don't think it really gets you away from Node/NPM. NPM is the Node Package Manager after all.
|
# ? Feb 11, 2018 20:50 |
|
That's my understanding, yarn and others are just another layer at the client side. I found this website http://node-modules.io/ It suggests hosting your own registry and pointing npm at it. There really is no alternative, is there. Nolgthorn fucked around with this message at 21:15 on Feb 11, 2018 |
# ? Feb 11, 2018 21:11 |
|
Nolgthorn posted:Is there any alternative to using npmjs as a Javascript developer? I think that's the story with the package repositories for pretty much all mainstream languages. I don't like it but I've taken to keeping node_modules under version control just because I don't really have absolute confidence in the people running the node repo.
|
# ? Feb 11, 2018 21:16 |
|
Nolgthorn posted:Is there any alternative to using npmjs as a Javascript developer? you can host your own registry and cache whatever modules you use into it. it's not a bad idea, depending on how your CI stuff is set up. but i feel like this isn't really the question you're asking
|
# ? Feb 11, 2018 21:46 |
|
|
# ? Jun 5, 2024 09:16 |
|
uncurable mlady posted:you can host your own registry and cache whatever modules you use into it. it's not a bad idea, depending on how your CI stuff is set up. This is the solution I usually push for, as checking in node_modules can cause an explosion in your repo size, and NPM in general has solved a lot of problems (pad-left fiasco not-withstanding).
|
# ? Feb 11, 2018 21:49 |