I'm creating a game using WebGL. I'm currently working on menu design, and it occured to me that one of the great advantages I have in using web technologies is that I can use HTML for the GUI.
The game uses pixel art, so in keeping with that art style I want the menu to have pixelated buttons and text as well. I'm wondering if using CSS filters or something similar I'm able to pixelate my rendering of DOM elements, or if I'll need to create full button images beforehand (much less appealing).
Thanks!
Related
I am building web-apps using Ratchet, replicating the look of native APPs.
Ratchet is doing a great job at replicating the look of iOS, but there is a feature which I really miss from iOS which is the ability to "move" an element to the next page by moving and zooming it.
Example: I have a list of articles. Upon clicking the thumbnail of the article, the thumbnail image gets bigger as the articles open, in a seamless transition.
The following gif. from Facebook "paper" illustrates well the effect I want to achieve:
http://d24njcbunk2gp2.cloudfront.net/assets/2014/02/Facebook-Paper-008.gif
My questions would be:
- Is this type of transition possible using only web-technologies?
- Is it possible, in general, to have one element moving in a continuous way from one page to another without any flickering effect?
- Would such effect be possible only with single-page applications? (say a single-page website built with angularJS)
- Would any framework / tool (PhoneGap?) be useful in achieving this result
Thanks so much.
Thomas
I'm fairly new to web development (but not programming) and needed some advice:
I am working on a mobile app using HTML5, CSS, and Javascript (and Cordova for device functionality).
The app will be similar to flashcards (those things you used to use as a kid to memorize things). There will be some animation (flipping the card over), etc. but for the most part, the design of the flashcard will be static (borders with the main content in the center).
What would be the best way to proceed with that (drawing on a canvas or using an image for each flashcard? I am interested in performance and visual considerations of the two.
It really depends on the type of animation the cards will be doing, if they are flipping on the x/y axis you could simply have the image and manipulate its size/flip it etc with JS.
In my experience these kind of calculations/animations are quicker (if you want it to be compatible across multiple devices) however any more complicated animations should use the canvas - I have noticed when creating adverts for smartphones the canvas can really slow some animations down.
I am developing a visualization in form of graph with edges that may be curved and vary in color and thickness. The nodes on the graph contain an image and some text. The graph is animated and interactive (you can click and move the nodes) and uses force directed layout.
I want to support at least a large portion of smart phone browsers such as those on android and iphone devices as well as any modern browser on the desktop.
Is it possible to create such visualization without using either canvas or SVG?
If I must use one, which one would be a better choice?
It is certainly possible to do so with both technologies, but you should have in mind that they have different approaches.
I recommend you use canvas (there are lots of good libs out there such as kinetic) because android 2.x doesn't support svg :(
Definitely SVG if you want tooltips/hover effects. Because the elements in the SVG image are just XML tags you can add mouse event handlers to them in the same way you would elements in the DOM.
Bit of background
I've been producing a Flash-driven webcomic for three years now, incorporating some basic animation, a synced soundtrack and zoom-drag page viewing. The recent Flash-bashing, my desire to reach iHandhelds and my preference for open versus proprietary means that I want to make the move to HTML5 techniques this year. In the long-term, I think the writing's on the wall for Adobe's product, and I'm not entirely convinced that's a bad thing.
I'm relatively comfortably with both CSS and HTML, having worked a little in web design before. However, JavaScript is a foreign country to me, and I simply wanted to get some advice as to
whether what I want to achieve can be accomplished consistently across all browsers and
what the best techniques/approaches to the problem would be.
Any advice, even general principles, are very welcome. I've already sought out several HTML5 tutorials and introductions, which lead me to believe that the canvas element will be foundational to my plan; however while all the individual problems I face have been answered by many blogposts and guides, combining the various solutions into a single entity is something I'm not currently able to figure out, as I'm not certain of the limitations of the new HTML5 tags, or of best practice.
If I'm successful in achieving what I'm after, I'm going to post the full code online with an explanation of all the elements. Webcomics might not be a huge domain, but having a resource that did this would have made my life a lot easier - hopefully it'll help someone else in a similar position.
What I'm after
Here's a diagram giving the basics of the design requirements. I'll explain the elements, and the desired extras, below.
(Perhaps the simplest way to demonstrate what I'm after would be for interested folks head over to my website and see how my comic currently works. This isn't a plug - it would simply give the quickest insight.)
At core, I'm after a viewer that will:
display text (SVG image) in a canvas element above an raster image the page's panel art
both images should be zoom-and-draggable in sync but should ideally fade in separately, with the raster image coming first, followed by the SVG image
I'm guessing that the best way to accomplish this would be to layer two canvas elements one above the other using z-index, with the SVG file in the uppermost element. These could then be nested, as in the diagram, within a div element that would carry the zoom-drag function. Is this a reasonable approach, or are there more efficient options?
The next and previous buttons are self-explanatory. Would it best to have each page (bearing in mind some will involve animation and music) on a separate page, or to have all pages within a chapter on a single page, with the buttons making them visible progressively? I imagine this would have a great impact on loading speeds.
Finally, I'd like to have the viewer capable of displaying fullscreen if the reader desires. I imagine this could be accomplished by using Javascript to make the canvas elements and their surrounding div switch between different CSS giving a px-defined size and 100% height and width. Is this a good approach? Is it possible to apply the size change to the div element only and have the canvas elements automatically follow suit, possibly by defining their size via % in CSS?
Desired extras
At various points in the comic I make use of basic animation techniques - simple movements of layered raster images across the viewing pane. This would be simple to accomplish, I imagine, using Javascript; am I correct in thinking that applying overflow:hidden to the wrapping div will prevent images larger than the viewing area from spilling outside the viewer area?
I also want to synchronise audio with some of these animations. I understand that synchronising canvas events with the audio would be the best way to do this on, permitting both to begin activity only upon page loading or next button click.
That's about everything. As said, any advice at whatever level would be greatly appreciated, even if it's 'yes' or 'no' to the various questions I've asked. At root, it would also be good to know if HTML5 is the best option for what I'm after or whether (with gritted teeth) I should stick to Flash for now and go after handhelds using Adobe AIR.
I am web-developer. I would like to integrate 3D Content into my web-site. The level of integration should allow something like 3D Cube floating above HTML Content. Moreover, I want 3D Content to be interactive, i.e. one should be able to click on certain side of the cube and get some JavaScript code executed in same way as if somebody clicked a button.
I have seen some demos with CSS3 3D Transforms in HTML 5. It's even possible to render HTML Content on 3D Objects like images and buttons, but they don't seem to allow something as sophisticated as floating cube.
Is it possible today? Which technologies should I use?
After some research online found XML3D and X3DOM projects. They offer integration with DOM and JavaScript, XML-like scene description and even programmable shaders. Seems that it's exactly what I was looking for, however both projects are still in development :(.
The best options you have available today are CSS transformations, and/or the Canvas element. With CSS you can perform various transformations, even including the construction of an animated cube (easier with preserve-3d).