{"id":36192,"date":"2018-02-15T03:01:01","date_gmt":"2018-02-14T17:01:01","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=36192"},"modified":"2018-02-14T16:15:40","modified_gmt":"2018-02-14T06:15:40","slug":"rainbow-games-background-image-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/rainbow-games-background-image-tutorial\/","title":{"rendered":"Rainbow Games Background Image Tutorial"},"content":{"rendered":"
\"Rainbow<\/a>

Rainbow Games Background Image Tutorial<\/p><\/div>\n

If you are a regular at this blog, you will know that we are exploring “in depth” the implications of discovering what the “Did you Know?” section of the recent Column Intelligence Primer Tutorial<\/a> told us about how you can have a background with transparency teamed up with that same HTML element’s “foreground” having full opacity. We find this very interesting, because time and time again, we’ve left off doing web design a certain way in ignorance of “the genius” of this webpage<\/a>‘s great advice, thanks.<\/p>\n

Today, we have another application of that discovery, to brighten up the recent, the whimsical Rainbow Games PHP Emoji Tutorial<\/a> game(s). Whimsical it may all seem, but if you are like me and “graphically challenged”, emojis and this background image transparency idea and some other CSS background image ideas, today, namely …<\/p>\n


\nCSS background-position<\/a>: (left)% (top)%; (as applied to background image(s))
\n<\/code><\/p>\n

… can be powerful countervailing “friends”.<\/p>\n

If you are familiar with our “Rainbow Games” web application, it works via an HTML table element (where today we’ve specified cellpadding<\/a>=0 and cellspacing<\/a>=0 to avoid white bits we haven’t had to worry about before when we didn’t have any background imagery) that nests an HTML tbody element that nests HTML tr (row) elements (that are the ones we’re going to “background semi-transparent image” style today) which nest individual HTML td (cell) elements that the sportspeople traverse as they sprint or row etcetera etcetera etcetera.<\/p>\n

Even though in the CSS styling of all this it is not mentioned, because it is the default, what also makes all this work is …<\/p>\n


\nCSS background-repeat<\/a>:repeat;
\n<\/code><\/p>\n

… and what a good default it is, enabling we “graphically challenged” to, sometimes, only have to come up with “slivers” of our ghastly graphic elements, but be able to get the wonders of CSS styling to help us out “filling in” the repeated “gaps” (alas, not in our abilities?!).<\/p>\n

Let’s now talk about another thing in our control for this background-position:(left)%<\/b> (top)%<\/b>;<\/i> … in our case we develop 8 background images for the sports we have, but they look a lot alike, and Paintbrush and a little GIMP (image editors) suffice for us to get them done, the default one, as shown below, being sprint.jpg<\/a> …<\/p>\n

<\/img><\/p>\n

… see how we have lanes separated top to bottom running left to right. See the “baubles” of interest off the track? We add interest with these. We have each runner, and all this is very approximate (and whimsical, remember?!), adopting a lane via different CSS for each lane, the top one<\/b> having (the CSS styling) …<\/p>\n


\n#mytr {
\n background-image: linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)), url('sprint.jpg');
\n background-position: 0%<\/i> 18%<\/b>;
\n}
\n<\/code><\/p>\n

… and the bottom one<\/b> having …<\/p>\n


\n#mytr8 {
\n background-image: linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)), url('sprint.jpg');
\n background-position: 90%<\/i> 58%<\/b>;
\n}
\n<\/code><\/p>\n

Get it? Hope so. Now as far as “the baubles”<\/i> go the execution of the race will be made more interesting by each lane seeing different “bauble detail”<\/i> because of the (left)%<\/i> differentiation per lane. Imagine how impactive all this could be with your impeccable graphics skills added into the equation!<\/p>\n

The HTML source code for this web application’s live run<\/a>, emoji_walk_animation.htm<\/a> changed in this way<\/a> for today’s background imagery work. Hope you try it!<\/li>\n

We hope we haven’t assume<\/a>d anything regarding semi-transparent background with less transparent foreground<\/i> that you understand it can be a CSS static arrangement, as in the third and fourth code snippets above, or dynamically controlled in a Javascript DOM way like<\/b> (in our new Javascript function) …<\/p>\n


\nfunction depending() {
\nvar newbimg='sprint.jpg', trsuff='';
\nswitch(verb.toLowerCase().replace(\/\\ \/g,'')) {
\n case 'row':
\n case 'rowing':
\n newbimg='row.jpg';
\n break;
\n case 'cycle':
\n case 'biking':
\n newbimg='cycle.jpg';
\n break;
\n case 'climb':
\n case 'climbing':
\n newbimg='climbing.jpg';
\n break;
\n case 'juggle':
\n case 'juggling':
\n newbimg='juggling.jpg';
\n break;
\n case 'cartwheel':
\n case 'cartwheeling':
\n newbimg='cartwheeling.jpg';
\n break;
\n case 'waterpoloplay':
\n case 'playingwaterpolo':
\n newbimg='waterpolo.jpg';
\n break;
\n case 'mountaincycle':
\n case 'mountainbiking':
\n newbimg='mountaincycle.jpg';
\n break;
\n case 'handballplay':
\n case 'playinghandball':
\n newbimg='handball.jpg';
\n break;
\n default:
\n newbimg='sprint.jpg';
\n break;
\n}
\n if (newbimg != bimg) {
\n for (var itr=1; itr<=8; itr++) {\n document.getElementById('mytr' + trsuff).style.backgroundImage=\"linear-gradient(rgba(255,255,255,0.7),rgba(255,255,255,0.7)), url('\" + newbimg + \"')\";<\/b>
\n trsuff='' + eval(1 + itr);
\n }
\n bimg=newbimg;
\n }
\n}
\n<\/code><\/p>\n

\n

Previous relevant Rainbow Games PHP Emoji Tutorial<\/a> is shown below.<\/p>\n

\"Rainbow<\/a>

Rainbow Games PHP Emoji Tutorial<\/p><\/div>\n

In order to take that further genericization step onto the achievements of yesterday’s Rainbow Games Genericization Tutorial<\/a> to get onto<\/b> (the mathematics Induction principle inspired) …<\/p>\n