• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer

Clinical Encounters

  • Home
  • About
  • Blog
  • Contact
Home › Development › Resizing The Canvas for WebGL and More

Resizing The Canvas for WebGL and More

Sep 28, 2018 | Ian McKinnon

Why Resize?

Before: Canvas scaled to 1920×1080

Clinical Encounters has thus far been designed with one aspect ratio in mind (which is 16:9, for those curious). When building the canvas and all the supporting elements that define Clinical Encounters, we did so while under some assumption that our desktop application would always keep the same presentation and that mobile and VR presentations would have their own designs. WebGL has made us rethink that a bit.

When built for WebGL in its current form, Clinical Encounters can appear a bit small while embedded in some web pages. This, in turn, affects how large the text appears and makes it hard to read in some cases. So, a simple question was proposed: Can we zoom in? When this was asked, the initial answer was no, but now we have a system which lets us adjust the scale and resolution to some extent.

How It’s Done

After: Canvas scaled to 1280×720

The key component, literally, is the Canvas Scaler component which we use to conform the canvas to a certain resolution. Our default resolution was 1920×1080. By adjusting this resolution to 1280×720, for example, the canvas scaler reduces the size of the canvas which in turn makes every object in the canvas appear bigger. In conjunction with TextMesh Pro, which handles scaling text amazingly well, everything still remains as sharp as it appeared when not scaled up.

The issues with this are that not all elements of the Canvas were meant to be scaled up or down. Before scaling, all the elements had 1080 pixels wide to fit, but now they have to squeeze into 720 pixels. By using defined anchor points and layout groups this can be handled well. However, not everything was set up this way. So, after reconfiguring the setup of several different panels, tabs, elements, and the layout of the case viewer scene itself, we now have something that can better handle this kind of scaling.

Automating The Scaling

The last things to note here are that, with a different scale, we don’t want some things taking up more space than needed. Take the tab content and the tab buttons. With the other surrounding elements expanded, the tab content area would actually be smaller due to how things are set up. The tabs don’t need to be as tall as they are when directly expanded, so we opt to shrink their height and give the new space to the tab content. To do this, we have manually found a layout which looks and feels good, and we adjust the values of certain elements through a script to match this after scaling. Attaching this script to the Unity Editor makes it even easier to quickly select the scale we want.

The WebGL Front

When it came to distributing the WebGL version of Clinical Encounters we decided to host it on itch.io. We found that hosting on a separate site made the process of embedding the game in our own web pages easier, allowed us to organize the different case builds in one place, and decreased the time it took to build and test new versions. However, it also came with its own issues. We originally wanted to only make one build that would read the patient’s name we would add to the URL and then load the corresponding case. However, because we were hosting the game on a different site we had no control over the URL and that could not work.

Another trade-off with hosting is that itch.io creates an iframe for your game that you can just immediately embed into whatever webpage you want. However, there are only a few things about this iframe that you can customize. There were some ways we wanted the iframe to behave with screen sizes and expanding. We edited the default style sheet created by Unity during the build process and could get the same effect and added in a special class to handle the embedded iframe and got the effects that we wanted.

What To Take Away

This is an example of how a lack of preparation and planning resulted in a bit of extra work. We have known about our targets for other platforms, yet we built exclusively for the desktop application. By planning for these potential changes ahead of time, we would have saved ourselves some work. So, when you’re embarking on development, make sure to plan ahead and try to outline/define any constraints and requirements for your software. If you development methodology allows it, try and remain flexible, too.

You can read more about the Clinical Encounters platform at its website.

Category: Development Tagged: dev-blog game-based learning

Health Impact Studio logo

About Health Impact Studio

We are a dedicated team of developers and researchers with the mission to improve the health of individuals through novel technology including games, virtual reality, and role-playing simulations. We welcome input from the full range of stakeholders to create a customer experience with the broadest applicability to improving health outcomes.

Clinical Tools – Spring 2021 Digital Health Awards® Winner

Jun 8, 2021

Clinical Tools Wins $200K SBIR Award to Decrease Vaping Behavior in Adolescents and Young Adults

Sep 30, 2019

Mindfulness and Patient Communication

Nov 19, 2018

Previous Post: « Working With WebGL
Next Post: Diagnostic Uncertainty: Is The Goal To Decrease Or Just Manage? »

Reader Interactions

Leave a Reply Cancel reply

You must be logged in to post a comment.

Ian McKinnon

Ian is a Unity Programmer working with C# primarily. Ian is a runner, dog lover, gamer, and is a pretty good juggler (The Circus is always his backup plan in life)

More Posts

Primary Sidebar

Keep Reading

  • Clinical Tools – Spring 2021 Digital Hea…
    Jun 8, 2021
  • Clinical Tools Wins $200K SBIR Award to …
    Sep 30, 2019
  • Mindfulness and Patient Communication
    Nov 19, 2018
  • Contact Us
  • Copyright & Reproduction Guidelines
  • Privacy Policy
  • Terms of Service
  • Technology Requirements
  • 508 Compliance

Footer

developed & maintained by
ClinicalTools

The Clinical Encounters Training Group: SBIRT Training | BupPractice | PainTx Challenge | CE:Vaping | CE:Alcohol | CE:Obesity | Lift

Clinical Encounters | Reader

Clinical Encounters | Platform

Group Training

  • Facebook
  • LinkedIn
  • Twitter
ceplatform@healthimpact.studio

101 A Market St Chapel Hill, NC 27516
919-960-8118

Contact Us

© 2023 · Clinical Tools, Inc · Log In

Walkthrough of a Clinical Encounters | Decisions Interactive Patient Case

Sign up for our Newsletter!

Want to keep up to date on HealthImpact.Studio developments? Enter your information below and we’ll let you know when we have new products or open research studies, and what we’re working on for the future.

  • Hidden
Log In

Forgot Password?
Register New Account
Don’t have an account?
Register now!
Register
  • Hidden
  • By registering, you agree to the Terms of Service and Privacy Policy. If you are a part of a group, you understand your participation information can be provided to the group organizer.
  • This field is for validation purposes and should be left unchanged.

Welcome!

If you have an account, please log in! Or create an account now!

Create an Account!