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.
Related
I'm developing simple mobile game for android using cordova. The game is the simple Hidden Object game where player has to find requested objects on the scene. One of my levels had very slow performance. More powerful devices worked fine. I've tried force GPU rendering using translateZ hack and got huge performance boost but, on low-end devices started wired rendering artifacts.
This screenshot is from Meizu U10. The background consists of 3 layers with position absolute, z-index 1,2,3. Objects to find (Cow, chicken etc) has same position absolute and z-index depends from background they are related to. If run game in browser on the same device, there is no artifacts and performance just great. Google did not give me any useful clues, so i will be very appreciate any guesses and tips.
Using SVG can be an option you might need to consider, specifically inline SVGs.
Using inline SVG is beneficial to the performance of a website because
it eliminates the HTTP request needs to load in an image file. Since
no file needs to download, this results in smaller loading times for a
page. This makes your website appear faster to visitors, improving the
user experience.
You should really consider using a webGL rendering engine such as PixiJS if you want to have performance in your games. You would just have to convert your images into textures.
Flipborad mobile app has a unique style, the screen will split in two half and the lower part will rotate on the upper part.
Can any one give some hint how to develop such a thing with HTML5 for Hybrid mobile apps?
I think this might be of use
http://engineering.flipboard.com/2015/02/mobile-web/
Flipboard is using react to render layout on canvas. That's why it's so quick and gives unlimited possibilities. However it's not very accessible unless you put a lot of effort into that.
I'm developing a Math-based game/app using HTML5 technologies (HTML5 + CSS3 + javascript) for the upcoming Blackberry 10 Devices, to be ported using Blackberry WebWorks.
The game requires generation of lots of random numbers. I'm currently generating them in "p" tag and styling them. But some guy suggested me not to use Stylesheet so much and rather use Canvas API.
Is there any effective/performance-improving reason to listen to the suggestion or it is just any suggestion ?
I look it at this way:
HTML tags have pre-defined properties and behaviour such as padding, floating, relative positions, etc. Making use of these tags ensures that the developer does not have to write tons of code to mimic this trivial behaviour. Think of building a list: using <ul> and <li> will take care of the positioning for you. In canvas you need to create this from scratch or look for a library. HTML/CSS IMO is perfect for Web Apps. In terms of performance, make sure your animations are done in the GPU (using 3d transforms) and the performance is great. It is easy to respond to different screen sizes when using HTML/CSS too.
Games tend to use absolute positioned elements that are manipulated directly (example, move player from 100px to 150px) and are therefore easier to work with in Canvas. Performance-wise, canvas2d operations are hardware accelerated, so it should be as smooth as using HTML/CSS.
I am still very much in the planning phase on this but here is the basic idea of what I want to do. I also have not done much/any web development in the past few years so I am a little out of the loop on what will/wont work.
I want to have a video playing essentially on a background layer with various widgets on top of it. The widgets will all be fairly simple HTML based text and maybe a few images. The widget also need to be movable (eg. I need to be able to drag and drop the widgets to move them). Finally I would really like it to work on a tablet (iPad or Android).
Am I going to need to use flash or silverlight for something like this? I would rather not because I know that makes it hard to get tablets working. I know HTML5 is supposed to be the new hotness but I don't really have a good idea of its capabilities.
Flash or Silverlight will rule out tablets (the iPad anyway), not just make them hard.
I'd start with jQueryUI it supports easily making elements moveable.
I'm trying to make some web-based board games, and I want the interface to be pannable and zoomable. Much like how in Google Maps, you can pan and zoom the map, I want the game board to be moved and zoomed. Unlike Google Maps of course, I do not want to work with image tiles.
Can anyone give me recommendations as to what technology to use? Would this be a good fit for plain HTML? HTML 5 Canvas? or SVG? Any particular JS libraries to recommend or something else entirely?
I'd like to avoid flash and Java. And browser compatibility is plus, but not the most important factor. For example, I think it would probably be OK to require Chrome Frame for older IEs.
Any ideas/advice would be appreciated.
A few thoughts:
Use the OpenLayers UI with a "fixed" strategy to load vector graphics for your board all at once. (This is overly heavy-weight, probably, but comes with pan-zoom and IE compatibility.)
Use Raphael to build your board in SVG, using RaphaelZPD for pan-zoom. RaphaelZPD isn't cross-browser (even though Raphael is), so you'd need Chrome Frame for IE compatibility. This would be pretty lightweight, I think.
Use pure SVG for your board, use SVGpan for pan-zoom. Chrome Frame required here too, though you could use SVGweb if you wanted. You could draw your boards right in Inkscape, clean up the SVG's and add whatever ID's you need in the XML (SVG is XML under the hood), and interact with the board with jQuerySVG if you like, or script interaction by hand. Did I mention that CSS works with SVG? I think this is your best bet.
I can't think of an advantage to using Canvas here, unless you had lots of animation or bitmaps. SVG is far more transparent in how it works - it's XML under the hood, and when rendered in a page, becomes DOM nodes you can easily manipulate in modern browsers.
Plain HTML would probably be hard to handle scaling with. I've seen plenty of image scalers, but haven't seen complex HTML structures, and complexity would be compounded by needing to pan at a zoomed level.
If you want total control of your development environment you could create your own web rendering plataform. I think you can use HTML canvas 5 as your interface with the browser.
You can easily implement drag, pan and zoom using HTML canvas. This approach is very similar with game development in many plataforms. Here an example of using HTML canvas 5 for an interface that supports pan, drag, and zoom.
Having the control of your environment you will have a wide range of possibilities.
If you don't mind tiles, I'd suggest checking out Polymaps "A JavaScript library for image- and vector-tiled maps using SVG". It's probably possible to borrow some parts from there for panning and zooming.