Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/BvUy59okKzQ/harley-quinn-posters

A bit of a retro feel is always a good way to get people's attention. Nostalgia's an easy button to press; that's why people are guaranteed to lose it for shows like Stranger Things and Mad Men, and why each year's design trends are almost certain to incorporate elements from bygone decades.

If you really want a vintage twist to hit home, though, you need to aim for an era that's not being milked to death already; does anyone really want to see another 1980s-inspired design at the moment? So we're delighted to see the new poster designs  for DC's upcoming Harley Quinn movie, Birds of Prey, which take nostalgia to a new level. 

Forget the 1980s; these posters, revealed on the Birds of Prey Twitter account, are rocking a killer 1480s vibe. Respect.

Is this the defining movie poster trend of the decade?

The main poster's inspired by Botticelli's most famous work, The Birth of Venus. Painted at some point in the 1480s, it depicts the Greek goddess Venus emerging from the sea in a giant scallop shell, fully-grown and completely nude. If you want to see the original it can be found in the Uffizi Gallery in Florence, Italy,

Botticelli’s The Birth of Venus is the clear inspiration here

Harley, played by Margot Robbie, isn't nude in this poster, but the look clearly comes from the Botticelli original. There's the giant scallop shell (adorned with chunky diamonds) and the sea, and while Venus is attended by the got Zephyr and other minor deities, here Harley is backed up by the likes of Black Canary, Huntress and Cassandra Cain. Oh, and a beaver in a pink tutu, because why not?

It's a strong look that's quite unlike the current trend in movie posters for a moody extreme close-up of the main character with a bunch of text plastered over it; we'd much rather look at something colourful with plenty of details to pore over. 

Supplementary posters feature other characters, as well as that tutu-sporting beaver

As well as the gorgeous main posters, DC has also released a series of supporting posters featuring individual characters from Birds of Prey, again carried off in that Botticelli style and giving you a closer look at everyone already mentioned as well as Victor Szasz and Roman Sionis (played by Ewan McGregor), all backed up with more bits of weird pre-Renaissance iconography to ponder over.

There's no word from DC on who's responsible for these fantastically weird illustrations; whoever it is, though, we like their style. And after the massive success of this year's Joker movie, it's good to have another Batman spin-off to look forward to. Birds of Prey is scheduled for release on 7 February 2020; there's no official site yet, but you can find out more on its Twitter account.

Related articles:

Check out these incredible posters for movies that never happenedA designer's guide to printing a poster39 stunning poster designs to inspire you

Original Source: https://www.smashingmagazine.com/2019/12/design-profitable-sales-funnels-mobile/

How To Design Profitable Sales Funnels On Mobile

How To Design Profitable Sales Funnels On Mobile

Suzanne Scacca

2019-12-06T11:00:00+00:00
2019-12-06T15:07:36+00:00

A sales funnel is a set of invisible steps you lay before visitors that takes them from the point of entry to the desired action. There are three stages in a sales funnel:

Top of the funnel (TOF),
Middle of the funnel (MOF),
Bottom of the funnel (BOF).

Why do we call these three stages a funnel? Because, together, they form a funnel-like shape:

A sales funnel and its three key stages: top-of-funnel, middle-of-funnel, bottom-of-funnel marketing. (Large preview)

At the top are all the people who enter your website or PWA. At the bottom are those who’ve bought something. The reason it tapers off is because your funnel sheds visitors and leads along the way who aren’t a good fit.

This process actually occurs with or without your help. (It’s just more effective if you take the time to carefully construct it.) Open Google Analytics and locate the tab called “Users Flow” under “Audience” or “Behavior Flow” under “Behavior”.

You’ll see something like this:

An example of using Google Analytics to chart the natural flow of visitors through a website. (Source: Google Analytics) (Large preview)

In this particular user flow, we’re looking at how traffic from various mediums (e.g. organic search, third party referrals, social media) moves through the website.

The shape isn’t as explicit as a funnel, but you can see that’s exactly what’s happening with the numbers. There were 4500 sessions to start. By the second interaction, only 143 remained.

By actually designing your sales funnels, though, you can improve your results and make them more predictable. You’ll do this by driving the right kind of leads into your website, laying down a clear set of steps for them to take and, hopefully, maximizing the number of them that convert.

To do this, you’ll need to understand what’s going on in the minds of your leads at every part of the funnel and then design an experience that caters to that exact mindset.

Let’s look at some examples.

Designing For Top Of The Funnel

Someone discovers your website or brand on Google, through a social media post or from a personal referral. So, they visit the website on a fact-finding mission.

TOF marketing is all about discovery. You want to take visitors from:

Sounds interesting.

To:

This is promising! I should [subscribe to the newsletter/like them on Facebook/grab this free downloadable].

Here is an example of how you might build out the Awareness part of the funnel:

Step 1: Show Up in the Right Places

Your sales funnel doesn’t begin on your website or app. It begins in places like Google search results, like this example for the Atlassian enterprise software company:

This is the first step of the TOF funnel: a Google search result for Atlassian. (Source: Atlassian) (Large preview)

In order for visitors to enter the funnel, you have to increase the exposure of your brand in places like:

Organic Google search results,
Social media posts,
Review site recommendations,
Content like blog posts and podcasts.

You can also use paid search and social ads to boost brand awareness, but be careful. As this WordStream infographic demonstrates:

The WordStream infographic shows how different keywords perform better in SEO vs. PPC placements. (Source: WordStream infographic) (Large preview)

Paid placements are much more attractive to consumers who are ready to buy (i.e. at the bottom of the funnel). Top of the funnel consumers, however, are simply on a fact-finding mission, which is why you’d be best off finding organic placements (in search and elsewhere) to put in front of them.

Step 2: Help Them Learn More

Once visitors enter your website, you want to make it as easy as possible for them to get the information they need. On mobile, that means giving them a shortcut above the fold:

The Atlassian home page invites visitors to ‘Learn more’. (Source: Atlassian) (Large preview)

There’s nothing complicated about what the CTA button is asking visitors to do. No pressure to buy. No snarkiness or attitude. Just a straight-forward, “Let us help you discover our products.”

Step 3: Give Them a Little Room

It’s not as though Atlassian is some unknown brand. It’s the developer of products like Jira, Trello, and Bitbucket. And, yet, its first step is to invite visitors to take time to learn more. More websites would be better off if it had as welcoming of an approach.

The next step in this process gives visitors the time and space to research Atlassian’s products:

Atlassian encourages visitors to take time learning about all of the software available. (Source: Atlassian) (Large preview)

There are no pesky pop-ups on this page to distract visitors from the list of products. There are no ads or banners drawing attention to special offers or anything like that. There aren’t even any “Buy Now” buttons. Each product description is followed by a “Learn more” button.

This is perfect for the business owner or CTO who simply wants to gather up facts on software options before making any buying decisions.

Step 4: Make a Connection

Because these are top-of-funnel visitors, there’s no way you’re going to get them to convert on the spot — especially for enterprise software. So, your best bet is to throw a soft pitch their way.

In the case of Atlassian, it offers a free trial:

Atlassian doesn’t push TOF visitors to buy right away. A free trial is offered instead. (Source: Atlassian) (Large preview)

No credit card is required at this time. This is simply about letting prospective users learn even more about the product without the pressure of a price tag.

If you have a product that they can discover first-hand, this is a great way to earn the trust of TOF consumers and fast-track them to conversion.

If you don’t have a product that can be tested, that’s fine. There are other ways to help your users learn more and stay connected through email. A lead magnet like a downloadable checklist or ebook is one way to do it. A subscription to your blog is another. Or you might just invite them to follow you on social.

However you make that connection, make sure you’re only asking for the bare minimum:

Atlassian free trial form asks for only required user data. (Source: Atlassian) (Large preview)

If you’re thinking of going the route of a lead magnet, read this guide for tips on designing the lead gen landing page.

Designing For Middle Of The Funnel

For businesses with shorter sales cycles (i.e. ones with less complicated and cheaper products), this part of the funnel doesn’t usually exist. For those that do need it (like service providers and SaaS companies), though, it’s a critical part of the sales process.

We’ve already established that leads that get to this stage are interested since they shared their email address or connected with you in some other manner. Now, it’s your job to feed them with free value and insights so they go from:

This is promising!

To:

This is exactly what I’ve been looking for.

MOF marketing is all about building relationships and nurturing trust while you give your prospects time to consider whether the purchase is worth it.

Here is an example of how you might build out the Nurturing part of the funnel:

Step 1: Keep in Touch

Your website has successfully educated visitors enough to become interested leads. Now, you have to actually do something with that connection.

If they subscribed by email, started a free trial or downloaded a lead magnet, they should begin receiving email communications.

If they followed your brand on social, then they should start seeing your posts on a regular basis.

Just keep in mind that these messages shouldn’t be about the hard sell. At this stage, all you’re doing is providing extra value and building trust in the process. If you contact them at the right frequency and with the right kind of content, though, they’ll eventually get to a point where there’s no doubt in their minds that they want to buy from you.

For example, I was on Google recently looking for “spas near Providence” (where I’m moving to early next year). I always book a spa session for my birthday and was just curious what kind of options I’d be working with.

In my Google Maps results, I discovered The Bodhi Spa. It had great reviews, it was close to where I was moving and it had the kind of spa services I was interested in. So, I figured, why not click and learn more?

I was happy with what I saw, so I decided to follow them on Instagram so they could stay top-of-mind until I move to Providence. This is the exact thing you want to happen with your TOF prospects.

And the way the spa continues to stay in touch is the exact thing you (or whoever handles the marketing for the website you built) should be doing in the MOF:

A recent Instagram post from The Bodhi Spa. (Source: The Bodhi Spa) (Large preview)

What’s great about this example is that the spa doesn’t overdo it. They only post once every week or two — just enough to keep followers (and interested prospects) engaged:

The Bodhi Spa posts enticing photos on Instagram every week or two. (Source: The Bodhi Spa) (Large preview)

Another nice tip you can leverage from this example is how the posts are written.

Sure, the Instagram page is meant to be promotional. However, the posts themselves aren’t written in a sales-centric tone. For instance, the last post that went up simply says:

Gimme some #happyhormones #plungepool #bodhispa #heatupcooldownrelaxrepeat

The enticing image and the relaxed message work well for MOF marketing. It’s like, “Hey, we’re here whenever you’re ready.” And, for my own purposes, that’s perfect. As an interested prospect, I’m glad I’ll have these kinds of updates to remind me to book a session once I’m in town.

Step 2: Always Include Your Link

When you get close to the bottom of the funnel, your links should go deeper into the site. For instance, let’s say you were to run a Google ad for a specific product or sale. The link in that ad wouldn’t go to your home page. It would go to a targeted landing page that would shortcut the whole process.

MOF prospects aren’t at that stage yet, so you should still send them to your home page or some other top-level page on your website (just not a navigation-less landing page).

The Bodhi Spa, for example, points all Instagram visitors to its home page:

The Bodhi Spa includes a link to its home page on Instagram. (Source: The Bodhi Spa) (Large preview)

Most newsletters and email communications will do the same, with a link at the very top or bottom of the email pointing to the home page.

Just make sure the link you send them to naturally directs them through the middle-of-funnel steps.

Step 3: Point Them in the Right Direction

For longer sales cycles, make sure your website is fully prepared to provide answers to interested prospects — both directly and indirectly.

As far as the direct approach goes, a contact form and live chat would be useful. You should exhaust the indirect options before you go too crazy with setting up contact channels though.

As far as the indirect approach goes, your website should be like a self-guided journey. That way, when they land on the home page, it’s clear which directions they can go in:

The home page of The Bodhi Spa has a ‘Begin Your Journey’ button. (Source: The Bodhi Spa) (Large preview)

The home page gives visitors two ways to go:

Begin your journey,
Or access the menu.

Now, as a first-time visitor at the top of the funnel, the prospective customer likely scrolled through the home page to look for an opportunity to quickly learn more:

The home page of The Bodhi Spa PWA points visitors to ‘Learn More’. (Source: The Bodhi Spa) (Large preview)

As a return visitor, however, this part of the home page opens up a new pathway that they likely hadn’t considered the first time around: “Book Now”. Even the order in which the buttons appears suggests that that’s the order in which visitors should interact with them.

That said, MOF prospects aren’t necessarily ready to buy on a second, third or even fourth visit. While they’re not in the initial “Is this worth it?” discovery phase, they’re still trying to gather all the facts and make up their mind.

(And if they are sold on your offer that quickly, that’s great! You have the button there, ready for them to click.)

Step 4: Reinforce Your Value

Even though this is a mobile website (or PWA) where content should be kept to a minimum, it’s important to include all details that will make-or-break their decision to buy. Don’t stuff them into the home page or a single services or products page though.

Lay it out in your navigation like this:

The Bodhi Spa has a dedicated page for each of its services and its company story. (Source: The Bodhi Spa) (Large preview)

At first glance, you might not think this website has that much information since the home page is so straight and to the point. However, this navigation digs deep into the spa’s offerings along with the company’s story.

Also, take note of the FAQs included under “Our Journey”. That’s a great touch. If you know that prospects tend to come to you with the same questions, don’t make them use the “Connect” or “Contact” page to fill out a form. It not only clogs up your inbox with questions, but it forces them to do extra work.

Make your website do most of the work instead.

And if it’s not prepared to answer all of the questions and ease all of their doubts, then it’s time to revisit the structure, content and design of your site. The MOF is the trickiest part of the sales funnel. If you can successfully bring prospects back to the site from your mobile marketing efforts, don’t let it go to waste.

Designing For Bottom Of The Funnel

Okay, so your prospects know what you’re offering and they’re ready to buy. All they need is one last push through a seamless and effortless checkout so that they go from:

This is exactly what I’ve been looking for.

To:

Where’s my credit card?

Here is an example of how you might build out the Conversion part of the funnel:

Step 1: Make Your Offer Clear

If your website were a flesh-and-blood salesperson, this is the point of the call or meeting where they’d ask, “Can I have your business?” There’s no point in beating around the bush on your website or your marketing either.

For MOF visitors who’ve finished checking up on you and your offering, you’ll want to boldly make your offer where they’ll easily see it, just as the Boston Calling Music Festival does:

The Boston Calling Music Festival website clearly and boldly published its tickets. (Source: Boston Calling Music Festival) (Large preview)

For TOF visitors who don’t need much convincing or nurturing, you can directly post your offer to them over email or social media:

An email for tickets to the Boston Calling Music Festival. (Source: Boston Calling Music Festival) (Large preview)

Just make sure your sales funnel can be truncated into TOF and BOF in that case.

For something like a concert where the offer is clear-cut, going this route would be fine. However, think about something like a professional conference or retreat where tickets run upwards of $1000 and the cost of travel adds even more weight to that total. If you’re asking for a huge commitment of time, money or effort from your customers, don’t skip the MOF marketing steps.

Once you’re in this stage, though, you can put aside all of that education you did earlier. All you need to do now is sell, so make sure the “Buy” button is as clear as day wherever you put it.

Step 2: Summarize Their Purchase in the Cart

Whether customers are putting products into a shopping cart, purchasing tickets to an event or signing up for your SaaS, it’s a good idea to quickly remind them of what they’re about to buy before you hop into checkout.

On the Cart page, provide a summary like this:

The Boston Calling tickets page reminds visitors what they’re buying before they check out. (Source: Boston Calling Music Festival) (Large preview)

The Cart page makes sure that buyers fully understand what it is they’re buying. That way, they don’t go through checkout, only to realize at the email confirmation stage that they bought something they can’t use or on dates they’re unavailable. This’ll reduce the numbers of emails, calls or refund requests you have to handle post-sale.

Step 3: Streamline Checkout

Last but not least, make it easy for your customers to get through checkout.

The first thing to do is simplify the sign-in/sign-up process:

The Boston Calling Music Festival website provides multiple options to sign in or up for tickets. (Source: Boston Calling Music Festival) (Large preview)

Customers can sign in with an existing account or they can sign up for a new one. And the sign-up process has two options as well:

Create an account with Facebook,
Create an account from-scratch.

You can’t see it here, but the form is enabled with autofill technology, which made filling it out lightning-fast.

The rest of the checkout process should be as easy to get through. One way to do this is by using dropdowns with the most popular options already selected (when it makes sense). That’ll save customers time having to manually enter their data:

Boston Calling auto-fills some checkout fields to speed up the process. (Source: Boston Calling Music Festival) (Large preview)

That said, even the most streamlined of checkout processes can get tiresome if there’s a lot of data to collect. But Boston Calling does a nice job of this, always giving customers a look at how many more steps are to come:

The Boston Calling checkout process clearly lays out each step of the process. (Source: Boston Calling Music Festival) (Large preview)

Even though there are four steps customers have to complete to get their music festival tickets, the last two steps are easy. Secure Ticket provides information on how their tickets are protected in case of inclement weather, disaster or some other reason for cancellation. And the last one is a final check to ensure they purchased the right ticket and are ready to submit their payment information.

It’s a beautiful system from start to finish and ensures that as many interested concert-goers book their tickets as possible.

Wrapping Up

Building a sales funnel into a website can be a huge relief for the people who run it. That’s because a carefully designed pathway can usher your visitors from the point of entry to conversion without much oversight or intervention from you at all.

Aside from some email or social marketing along the way (which can be automated), the rest of the work is done by your website to convert the best-fit customers. Plus, by building your sales funnels for mobile, you’ll ensure that you’ve created the most efficient pathways for your visitors regardless of which device they’re on.

(ra, yk, il)

Original Source: https://www.smashingmagazine.com/2019/12/real-time-multiplayer-virtual-reality-game-part-2/

How To Build A Real-Time Multiplayer Virtual Reality Game (Part 2)

How To Build A Real-Time Multiplayer Virtual Reality Game (Part 2)

Alvin Wan

2019-12-05T11:00:00+00:00
2019-12-05T19:08:09+00:00

In this tutorial series, we will build a web-based multiplayer virtual reality game, where players will need to collaborate to solve a puzzle. In the first part of this series, we designed the orbs featured in the game. In this part of the series, we will add game mechanics and setup communication protocols between pairs of players.

The game description here is excerpted from the first part of the series: Each pair of players is given a ring of orbs. The goal is to “turn on” all orbs, where an orb is “on” if it’s elevated and bright. An orb is “off” if it’s lower and dim. However, certain “dominant” orbs affect their neighbors: if it switches state, its neighbors also switch state. Player 2 can control even-numbered orbs, and player 1 can control odd-numbered orbs. This forces both players to collaborate to solve the puzzle.

The 8 steps in this tutorial are grouped into 3 sections:

Populating User Interface (Steps 1 and 2)
Add Game Mechanics (Steps 3 to 5)
Setup Communication (Steps 6 to 8)

This part will conclude with a fully functioning demo online, for anyone to play. You will use A-Frame VR and several A-Frame extensions.

You can find the finished source code here.

The finished multiplayer game, synchronized across multiple clients. (Large preview)

1. Add Visual Indicators

To start, we will add visual indicators of an orb’s ID. Insert a new a-text VR element as the first child of #container-orb0, on L36.

<a-entity id=”container-orb0″ …>
<a-text class=”orb-id” opacity=”0.25″ rotation=”0 -90 0″ value=”4″ color=”#FFF” scale=”3 3 3″ position=”0 -2 -0.25″ material=”side:double”></a-text>
…
<a-entity position…>
…
</a-entity>
</a-entity>

An orb’s “dependencies” are the orbs it will toggle, when toggled: for example, say orb 1 has as dependencies orbs 2 and 3. This means that if orb 1 is toggled, orbs 2 and 3 will be toggled too. We will add visual indicators of dependencies, as follows, directly after .animation-position.

<a-animation class=”animation-position” … />
<a-text class=”dep-right” opacity=”0.25″ rotation=”0 -90 0″ value=”4″ color=”#FFF” scale=”10 10 10″ position=”0 0 1″ material=”side:double” ></a-text>
<a-text class=”dep-left” opacity=”0.25″rotation=”0 -90 0″ value=”1″ color=”#FFF” scale=”10 10 10″ position=”0 0 -3″ material=”side:double” ></a-text>

Verify that your code matches our source code for Step 1. Your orb should now match the following:

Orb with visual indicators for the orb’s ID and IDs of the orbs it will trigger (Large preview)

This concludes the additional visual indicators we will need. Next, we will dynamically add orbs to the VR scene, using this template orb.

2. Dynamically Add Orbs

In this step, we will add orbs according to a JSON-esque specification of a level. This allows us to easily specify and generate new levels. We will use the orb from the last step in part 1 as a template.

To start, import jQuery, as this will make DOM modifications, and thus modifications to the VR scene, easier. Directly after the A-Frame import, add the following to L8:

<script src=”https://code.jquery.com/jquery-3.3.1.min.js”></script>

Specify a level using an array. The array will contain object literals that encode each orb’s “dependencies”. Inside the <head> tag, add the following level configuration, :

<script>
var orbs = [
{left: 1, right: 4},
{},
{on: true},
{},
{on: true}
];
</script>

For now, each orb can only have one dependency to the “right” of it and one to the “left” of it. Immediately after declaring orbs above, add a handler that will run on page load. This handler will (1) duplicate the template orb and (2) remove the template orb, using the provided level configuration:

$(document).ready(function() {

function populateTemplate(orb, template, i, total) {}

function remove(selector) {}

for (var i=0; i < orbs.length; i++) {
var orb = orbs[i];
var template = $('#template').clone();
template = populateTemplate(orb, template, i, orbs.length);
$('#carousel').append(template);
}

remove('#template');
}

function clickOrb(i) {}

Next, populate the remove function, which simply removes an item from the VR scene, given a selector. Fortunately, A-Frame observes changes to the DOM, and thus, removing the item from the DOM suffices to remove it from the VR scene. Populate the remove function as follows.

function remove(selector) {
var el = document.querySelector(selector);
el.parentNode.removeChild(el);
}

Populate the clickOrb function, which simply triggers the click action on an orb.

function clickOrb(i) {
document.querySelector(“#container-orb” + i).click();
}

Next, begin writing the populateTemplate function. In this function, begin by getting the .container. This container for the orb additionally contains the visual indicators we added in the previous step. Furthermore, we will need to modify the orb’s onclick behavior, based on its dependencies. If a left-dependency exists, modify both the visual indicator and the onclick behavior to reflect that; the same holds true for a right-dependency:

function populateTemplate(orb, template, i, total) {
var container = template.find(‘.container’);
var onclick = ‘document.querySelector(“#light-orb’ + i + ‘”).emit(“switch”);’;

if (orb.left || orb.right) {
if (orb.left) {
onclick += ‘clickOrb(‘ + orb.left + ‘);’;
container.find(‘.dep-left’).attr(‘value’, orb.left);
}
if (orb.right) {
onclick += ‘clickOrb(‘ + orb.right + ‘);’;
container.find(‘.dep-right’).attr(‘value’, orb.right);
}
} else {
container.find(‘.dep-left’).remove();
container.find(‘.dep-right’).remove();
}
}

Still in the populateTemplate function, set the orb ID correctly in all of the orb and its container’s elements.

container.find(‘.orb-id’).attr(‘value’, i);
container.attr(‘id’, ‘container-orb’ + i);
template.find(‘.orb’).attr(‘id’, ‘orb’ + i);
template.find(‘.light-orb’).attr(‘id’, ‘light-orb’ + i);
template.find(‘.clickable’).attr(‘data-id’, i);

Still in the populateTemplate function, set the onclick behavior, set the random seed so that each orb is visually different, and finally, set the orb’s rotational position based on its ID.

container.attr(‘onclick’, onclick);
container.find(‘lp-sphere’).attr(‘seed’, i);
template.attr(‘rotation’, ‘0 ‘ + (360 / total * i) + ‘ 0’);

At the conclusion of the function, return the template with all the configurations above.

return template;

Inside the document load handler and after removing the template with remove(‘#template’), turn on the orbs that were configured to be on initially.

$(document).ready(function() {
…
setTimeout(function() {
for (var i=0; i < orbs.length; i++) {
var orb = orbs[i];
if (orb.on) {
document.querySelector("#container-orb" + i).click();
}
}
}, 1000);
});

This concludes the Javascript modifications. Next, we will change the template’s default settings to that of an ‘off’ orb. Change the position and scale for #container-orb0 to the following:

position=”8 0.5 0″ scale=”0.5 0.5 0.5″

Then, change intensity for #light-orb0 to 0.

intensity=”0″

Verify that your source code matches our source code for Step 2.

Your VR scene should now feature 5 orbs, dynamically populated. One of the orbs should furthermore have visual indicators of dependencies, like below:

All orbs are populated dynamically, using the template orb (Large preview)

This concludes the first section in dynamically adding orbs. In the next section, we will spend three steps adding game mechanics. Specifically, the player will only be able to toggle specific orbs depending on the player ID.

3. Add Terminal State

In this step, we will add a terminal state. If all orbs are turned on successfully, the player sees a “victory” page. To do this, you will need to track the state of all orbs. Every time an orb is toggled on or off, we will need to update our internal state. Say that a helper function toggleOrb updates state for us. Invoke the toggleOrb function every time an orb changes state: (1) add a click listener to the onload handler and (2) add a toggleOrb(i); invocation to clickOrb. Finally, (3) define an empty toggleOrb.

$(document).ready(function() {
…
$(‘.orb’).on(‘click’, function() {
var id = $(this).attr(‘data-id’)
toggleOrb(id);
});
});

function toggleOrb(i) {}

function clickOrb(i) {
…
toggleOrb(i);
}

For simplicity, we will use our level configuration to indicate game state. Use toggleOrb to toggle the on state for the ith orb. toggleOrb can additionally trigger a terminal state if all orbs are turned on.

function toggleOrb(i) {
orbs[i].on = !orbs[i].on;
if (orbs.every(orb => orb.on)) console.log(‘Victory!’);
}

Double-check that your code matches our source code for Step 3.

This concludes the “single-player” mode for the game. At this point, you have a fully functional virtual reality game. However, you will now need to write the multiplayer component and encourage collaboration via game mechanics.

4. Create Player Object

In this step, we will create an abstraction for a player with a player ID. This player ID will be assigned by the server later on.

For now, this will simply be a global variable. Directly after defining orbs, define a player ID:

var orbs = …

var current_player_id = 1;

Double-check that your code matches our source code for Step 4. In the next step, this player ID will then be used to determine which orbs the player can control.

5. Conditionally Toggle Orbs

In this step, we will modify orb toggling behavior. Specifically, player 1 can control odd-numbered orbs and player 2 can control even-numbered orbs. First, implement this logic in both places where orbs change state:

$(‘.orb’).on(‘click’, function() {
var id = …
if (!allowedToToggle(id)) return false;
…
}
…

function clickOrb(i) {
if (!allowedToToggle(id)) return;
…
}

Second, define the allowedToToggle function, right after clickOrb. If the current player is player 1, odd-numbered ids will return a truth-y value and thus, player 1 will be allowed to control odd-numbered orbs. The reverse is true for player 2. All other players are not allowed to control the orbs.

function allowedToToggle(id) {
if (current_player_id == 1) {
return id % 2;
} else if (current_player_id == 2) {
return !(id % 2);
}
return false;
}

Double-check that your code matches our source code for Step 5. By default, the player is player 1. This means that you as player 1 can only control odd-numbered orbs in your preview. This concludes the section on game mechanics.

In the next section, we will facilitate communication between both players via a server.

6. Setup Server With WebSocket

In this step, you will set up a simple server to (1) keep track of player IDs and (2) relay messages. These messages will include game state, so that players can be certain each sees what the other sees.

We will refer to your previous index.html as the client-side source code. We will refer to code in this step as the server-side source code. Navigate to glitch.com, click on “new project” in the top-right, and in the dropdown, click on “hello-express”.

From the left-hand panel, select “package.json,” and add socket-io to dependencies. Your dependencies dictionary should now match the following.

“dependencies”: {
“express”: “^4.16.4”,
“socketio”: “^1.0.0”
},

From the left-hand panel, select “index.js,” and replace the contents of that file with the following minimal socket.io Hello World:

const express = require(“express”);
const app = express();

var http = require(‘http’).Server(app);
var io = require(‘socket.io’)(http);

/**
* Run application on port 3000
*/

var port = process.env.PORT || 3000;

http.listen(port, function(){
console.log(‘listening on *:’, port);
});

The above sets up socket.io on port 3000 for a basic express application. Next, define two global variables, one for maintaining the list of active players and another for maintaining the smallest unassigned player ID.

/**
* Maintain player IDs
*/

var playerIds = [];
var smallestPlayerId = 1;

Next, define the getPlayerId function, which generates a new player ID and marks the new player ID as “taken” by adding it to the playerIds array. In particular, the function simply marks smallestPlayerId and then updates smallestPlayerId by searching for the next smallest non-taken integer.

function getPlayerId() {
var playerId = smallestPlayerId;
playerIds.push(playerId);

while (playerIds.includes(smallestPlayerId)) {
smallestPlayerId++;
}
return playerId;
}

Define the removePlayer function, which updates smallestPlayerId accordingly and frees the provided playerId so that another player may take that ID.

function removePlayer(playerId) {
if (playerId < smallestPlayerId) {
smallestPlayerId = playerId;
}
var index = playerIds.indexOf(playerId);
playerIds.splice(index, 1);
}

Finally, define a pair of socket event handlers that register new players and un-register disconnected players, using the above pair of methods.

/**
* Handle socket interactions
*/

io.on(‘connection’, function(socket) {
socket.on(‘newPlayer’, function() {
socket.playerId = getPlayerId();
console.log(“new player: “, socket.playerId);
socket.emit(‘playerId’, socket.playerId);
});

socket.on(‘disconnect’, function() {
if (socket.playerId === undefined) return;
console.log(“disconnected player: “, socket.playerId);
removePlayer(socket.playerId);
});
});

Double-check that your code matches our source code for Step 6. This concludes basic player registration and de-registration. Each client can now use the server-generated player ID.

In the next step, we will modify the client to receive and use the server-emitted player ID.

7. Apply Player ID

In these next two steps, we will complete a rudimentary version of the multiplayer experience. To start, integrate the player ID assignment client-side. In particular, each client will ask the server for a player ID. Navigate back to the client-side index.html we were working within Steps 4 and before.

Import socket.io in the head at L7:

<script src=”https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.1.1/socket.io.js”></script>

After the document load handler, instantiate the socket and emit a newPlayer event. In response, the server-side will generate a new player ID using the playerId event. Below, use the URL for your Glitch project preview instead of lightful.glitch.me. You are welcome to use the demo URL below, but any code changes you make will of course not be reflected.

$(document).ready(function() {
…
});

socket = io(“https://lightful.glitch.me”);
socket.emit(‘newPlayer’);
socket.on(‘playerId’, function(player_id) {
current_player_id = player_id;
console.log(” * You are now player”, current_player_id);
});

Verify that your code matches our source code for Step 7. Now, you can load your game on two different browsers or tabs to play two sides of a multiplayer game. Player 1 will be able to control odd-numbered orbs and player 2 will be able to control even-numbered orbs.

However, note that toggling orbs for player 1 will not affect orb state for player 2. Next, we need to synchronize game states.

8. Synchronize Game State

In this step, we will synchronize game states so that players 1 and 2 see the same orb states. If orb 1 is on for player 1, it should be on for player 2 as well. On the client-side, we will both announce and listen for orb toggles. To announce, we will simply pass the ID of the orb that is toggled.

Before both toggleOrb invocations, add the following socket.emit call.

$(document).ready(function() {
…
$(‘.orb’).on(‘click’, function() {
…
socket.emit(‘toggleOrb’, id);
toggleOrb(id);
});
});
…
function clickOrb(i) {
…
socket.emit(‘toggleOrb’, i);
toggleOrb(i);
}

Next, listen for orb toggles, and toggle the corresponding orb. Directly underneath the playerId socket event listener, add another listener for the toggleOrb event.

socket.on(‘toggleOrb’, function(i) {
document.querySelector(“#container-orb” + i).click();
toggleOrb(i);
});

This concludes modifications to the client-side code. Double-check that your code matches our source code for Step 8.

Server-side now needs to receive and broadcast the toggled orb ID. In the server-side index.js, add the following listener. This listener should be placed directly underneath the socket disconnect listener.

socket.on(‘toggleOrb’, function(i) {
socket.broadcast.emit(‘toggleOrb’, i);
});

Double-check that your code matches our source code for Step 8. Now, player 1 loaded in one window and player 2 loaded in a second window will both see the same game state. With that, you have completed a multiplayer virtual reality game. The two players, furthermore, must collaborate to complete the objective. The final product will match the following.

The finished multiplayer game, synchronized across multiple clients. (Large preview)

Conclusion

This concludes our tutorial on creating a multiplayer virtual reality game. In the process, you’ve touched on a number of topics, including 3-D modeling in A-Frame VR and real-time multiplayer experiences using WebSockets.

Building off of the concepts we’ve touched on, how would you ensure a smoother experience for the two players? This could include checking that the game state is synchronized and alerting the user if otherwise. You could also make simple visual indicators for the terminal state and player connection status.

Given the framework we’ve established and the concepts we’ve introduced, you now have the tools to answer these questions and build much more.

You can find the finished source code here.

(dm, il)

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/hDIhS7_uMck/

Every designer could use some high-quality textures for their projects. You can use them as backgrounds, overlays, or just to make your graphics a little more interesting. And they look great in posters, banners, or even as part of a website.

But free, high quality textures can be hard to come by. That’s why we’ve put together this huge collection of texture downloads, free for use by any designer. Some require an email subscription to download, but that’s all.

Altogether there are nearly 300 textures and brushes here, sorted into three categories: nature and materials, abstract, and brushes.

Your Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets

DOWNLOAD NOW

Nature and Materials

These photorealistic textures draw from nature, as well as man-made materials like brick and plastic. You’ll find woods, stones, paper, and dirt that make great natural backgrounds or overlays.

7 Plywood Textures

Crumpled Paper Textures Set

5 Stone Wall Textures Vol.2

24 Free Dirt Textures

Brick Wall Textures Vol.2

Plastic Transparent Textures

Arctic Frost Textures

6 Weathered Textures Vol.1

Vintage Paper Textures Set

Abstract

Rather than drawing from nature, these textures are more abstract and random. They make great background textures for websites and posters, or pretty overlays for objects. You’ll find noise, splatters, foil, and watercolors mixed in here.

10 Free Textures To Simulate Holographic Foil Print Effects

Dust & Noise Overlay Textures

Free Ink Stamp Texturizer Smart PSD for Adobe Photoshop

6 Watercolor Textures Vol.2

Rose Gold Foil Textures

25 Free Speckle Textures

Voyager Textures Background Set

Brushes

Last but not least we have textured brushes. These make it super easy to add shading, splatters, or grain to any image; just use the brush to draw it on, and add a little realism to your graphics.

Stipple Shading Brushes for Adobe Photoshop

10 Free Grain Shader Brushes for Adobe Photoshop

10 Free Halftone Texture Brushes for Adobe Photoshop

30 Free Vintage Shading Brushes for Adobe Illustrator

14 Free Subtle Grunge Texture Brushes for Adobe Photoshop

10 Free Ink Splatter Photoshop Brushes and PNG Textures

15 Free Grit & Grain Texture Brushes for Adobe Photoshop

Beautiful High-Resolution Textures

Whether you’re using a brush to carefully draw realistic grain on an image, adding a pretty foil overlay to an object, or downloading a futuristic texture to use as a background, there’s something for every designer here.

Most of these are totally free for use, but make sure to check the licenses before you include any of these in a commercial project. Once you have the go-ahead, go crazy using these gorgeous high-res textures in your web and graphic designs.