https://www.matt-mcauliffe.com/home daily 0.75 2015-09-15 https://www.matt-mcauliffe.com/work-avenue daily 1.0 2024-10-02 https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1621541232466-N718Z5NBGWFWNAB43FOK/DN_Bounties.png Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1621540728488-ST4SS4RR3O5Z4H5XOC1C/DN_Statistics.png Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1621540842580-JC1D4QNIRGNIOXFUMKWD/DN_Friends.png Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622054933541-ZQFV43NWVT5YOUDHRIA6/Screenshot+2021-05-26+134639.png Work - Day & Night Cycle Widget The Day & Night messages appear at the beginning and end of the day, signifying the change in dangers on the island. A function triggers on time of day change that then reveals this widget, but an issue I encountered was that the initial Dawn message would trigger during an intro train when starting the mode. To circumvent this, I skipped the initial trigger, and made the intro train trigger the Dawn message when it was complete. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622054430055-Z704PR3X8O3KBMJDENMU/DayBreak_Intro.jpg Work - IMPOSSIBLE ESCAPE You’ve awakened on the Island, coming to realize you weren’t extracted after your last Squads match. Stranded with 15 others, you now must prove you’re capable of overcoming the wild by making an escape. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622055196795-VOXKXY6QPPS4PTHECADO/Screenshot+2021-05-26+134717.png Work To switch between the Day and Night versions of the message, I could have duplicated it and used a widget switcher to switch between them. To keep the widget slimmer and cleaner, I instead changed the color of any colored text and images. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622055431892-I30WUHPOKTA6QUVWOSYS/Screenshot+2021-05-26+135545.png Work The choppa parts are all a custom parameterized material to allow for flexibility for designers to change images and color through animations or code. This was a challenge for I’m not an expert in materials, but it ended up paying off because, as I hoped, designers could iterate very quickly. Parameters include the icon, color of the icon, border, fill, and a ping animation, and scale of all the previously mentioned. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622055569982-PL75VXM0T3S1SKM5Q75X/Screenshot+2021-05-26+135642.png Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622055616726-G15SW00N1WZI6V775XWR/Choppa_Squad_Hand_Mockup_CyanHand.jpg Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622055320208-PRS6GN0FA3FYZ4HMX7PQ/Map_Squad_Checkmark_Hand_Mockup_CyanHand.jpg Work - Map Screen: Choppa parts I had pushed very early on to make sure that the choppa part icons would be their own widget with its own functions for state changes. That way designers can plug them in as needed and simply need to run the state change functions from the parent widget. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622062630528-0I6Q4ZQ51CSU5P66VFY7/MandosBounty.jpg Work - MANDOS BOUNTY Fortnite has a new limited-time mode that makes you the target of The Mandalorian, one of the best bounty hunters in the galaxy. The mode is called Mando's Bounty, and you'll have to survive both Din Djarin and other enemy players if you want to win. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622063640471-YU2QD59MX3UH8P3XBPKH/Fortnite_LTM_Vendetta_Squad_HUD_New_MarkedTarget_V2.jpg Work - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622064654261-FHBIGW4JZBRSTIBMVGRD/Screenshot+2021-05-26+162420.png Work - BOUNTY TARGET ANIMATION To achieve what was desired for the bounty target icons, I chose to learn from existing materials and create this one to accommodate the fill color change. That way the widget doesn’t have to swap between multiple textures. This proved to be beneficial in the long run, helping me strengthen my materials skills, which I continue to use to make more efficient widgets. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622064533771-3X35J39LRK0H6VR4GOXH/Screenshot+2021-05-26+162832.png Work - BOUNTY COMPLETE MESSAGING The Bounty Complete messaging not only displays when you eliminate your target, but when an enemy eliminates them, an ally, when to eliminate an ally’s, and when they eliminate themselves. Each of these situations display different reward information and text above it. To keep track of all of this, I made a spreadsheet with each situation and resulting message listed. This was beneficial to QA for testing and other designers that worked on the widget. I also had to duplicate a world space material from an in-game hologram and do drastic modifications to allow it to display the hologram in the UI. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622071311910-J0FN9E1YL3629NY5B9G5/Arsenal.png Work - Rally Royale Rally Royale is a new game mode that has been introduced by the makers of Fortnite. This mode required the players to race and collect a number of golden tickets in order to win the mode. All the players need to do is collect their set of golden tickets and reach the finish line. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622071493666-GFTHCZKEMNP0FEIDYW4B/Screenshot+2021-05-26+182419.png Work - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622067226051-SLI5QEQPAW4V7NBTEMAJ/BodyGuard_AssignmentMessaging_V8.jpg Work - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622067132068-5BSP52PGOWDDM724GO97/Bodyguard.jpg Work - BODYGUARD In Bodyguard, each squad has a VIP. Everyone else is a bodyguard sworn to defend them. If a squad's VIP is eliminated then the whole squad is out. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622066344145-Y30B7ML44K9IUO8VDYOK/Screenshot+2021-05-26+165741.png Work - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622066388675-FZZ374W53K2MMEQCVI78/Screenshot+2021-05-26+165815.png Work - CHOPPA: LOW FUEL I was tapped to make modifications to choppa HUD because of my previous material work on the plane and boat gauges. While an entirely different shape, my experience learning in the aforementioned material made this a relatively easy task. I was also able to recognize that there were certain aspects of the choppa HUD mockup that would require huge amounts of material rework and producers were able to make a judgement call on skipping these aspects. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622066144562-0UHMD2MC1W9Z4BD58Y4H/Boat_UI_full_screen.png Work - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622071747342-8GZ1FDMMK8VAL4MAGFK7/image_38.png Work - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622064824381-WFFR5EIA04FHVV1LOTU6/Air+Royale.png Work - AIR ROYALE A chaotic, rapid mode which prohibits players from landing on the ground, the Fortnite Air Royale LTM features a Top Gun-esque battle in the skies as players attempt to manoeuvre their planes while simultaneously eliminating enemy ones. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622064985476-GK37OGIJSUKT7Z9HD6YV/Plane_HUD_V8_Full.jpg Work - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622065659495-OGXIFGNSVAQB9VHVPBCG/image+%2854%29.png Work - MIDUS’ REVENGE This version of Fortnitemares plays like normal Solo, Duos and Squads however every player who is eliminated comes back as a Shadow. Every Shadow works together as a team to hunt down the remaining players to get a Nitemare Royale! https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622065417205-DVVQER2AB38M9VHLCUE7/Screenshot+2021-05-26+164148.png Work - Ghost quickbar In the center screen is a modal menu that appears when opening your inventory as a ghost and explains the player’s abilities. In the bottom center is a HUD widget that displays the player’s abilities. When a player uses an ability, it will enter a cooldown and a filling animation appears over the icon. The eyeball switches between 3 closed and open states to tell the player how visible they are to other players. To achieve the complex material animation for the cooldown, I was able to successfully pick apart an existing cooldown animation from a previous mode and reassemble to work with any shaped icon and apply it to our ghost abilities. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622053706918-NNAQZSX43ZQ4QMCDDI4C/Arsenic_GhostAbility_Screen_V3.jpg Work - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622068646206-5UFWV3645U8TDVWGTQIV/Screenshot+2021-05-26+173647.png Work - Fare UI The fare UI is the first time I had to dive into materials. By searching the Fortnite project for similar materials, I was able to put together a simple circular material that an image could be applied to and would mask the edges of the image to create the rider portrait. That knowledge combined with more existing materials, I created the radial progress bars for the bonus challenges. Understanding the usefulness of parameterized materials made me volunteer to work on any material related tasks, and even choose to create materials over building a complex widget. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622067551948-YGVF8RETQFXK5TKI7NFM/TiltedTaxi.jpg Work - TILTED TAXI A new limited-time mode, called Tilted Taxis, has landed in Fortnite and it more or less turns players into Uber drivers. This comes as an additional way of experiencing the recently added vehicles, which were introduced via the Joy Ride update. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622068557765-UBN799AMANE1IWO9UI2R/Screenshot+2021-05-26+173542.png Work - Progress Bar A modified version of the progress bar I made for Rally Royale. The flexibility of the progress bar allowed me to quickly match it to the mockup and have it up and running much faster than if I had to remake the progress bar. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622070700530-JVT7PL94I36IK1Z0RPD3/dropzone.jpg Work - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622070588565-WL2T9Y2C0U51VZFMK609/Phos_Team_HUD.jpg Work - Squad status bars I implemented the score tracker at the top of the screen by creating one widget that tracks the squad’s current score, whether a teammate is alive or dead, if the whole squad is eliminated, and if the widget belongs to the current player’s team. Then this could be instanced as many times as there are teams. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622068964424-AAR8U26280IKSXJZC7C0/fortnite-operation-knockout-spy-games-intel.png Work - SPY GAMES Spy Games come to Fortnite, bringing three new limited time modes to Epic Games' shooter. Completely changing the dynamic of the popular battle royale in a variety of fun ways! https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622070360341-6VKEO18HFI87VZ3RAZ62/Cobalt_VS_3v3.jpg Work - Verus Screen The versus screen was one of my first LTM tasks, and it proved to be a big layout challenge. The player names needed to be rotated and animated to slide out a specific angle that was consistent with the stripes. In order to achieve the look of the player portraits being cut off by the edge of the color stripes, I had to learn about the clipping setting on widgets, which I had not used before, to visually bound the image. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622070383282-EE906Q7LAKTOCWWY3YLQ/4.PNG Work - Bracket Screen The bracket screen was another big undertaking. To create the bracket lines, instead of using fixed textures, I used combinations of large horizontal and vertical boxes with small spacers in between that are filled with white. Because all of these boxes space themselves out equally, and with the assistance of padding, I was able to make a bracket screen that could scale gracefully with any number of teams. If more teams needed to be added, then I would just multiply the boxes on either side. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622071007112-JCETPZ1ASTPLZAXIAJ3R/Screenshot+2021-05-26+181026.png Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622071007173-1YK580J6YK1RJO5E5PL4/Screenshot+2021-05-26+181044.png Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622071008370-A6UL734QE2XCRD3B5H1T/Screenshot+2021-05-26+181112.png Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622070290010-WP4NWBJ4BW1JVV06HFH1/KNOCKOUT.jpg Work - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/75ef7509-3575-4350-99ee-ba175c9c1fdc/MainMenu_Difficulty.png Work The difficulty menu was mostly a matter of layout, but I am proud of how it turned out. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/894d37cd-c322-4193-9665-e7455256ae0a/MainMenu.png Work - Main Menu While the layout of the main menu initially seems simple, skinning it was no small task. And one of the largest parts of the task was constantly trying to maintain the proper visuals and intractability between various states of in-lobby/out-of-lobby, host/non-host, and ready/not-ready. The key to this was working with engineering to have these states stored and maintained elsewhere while the UI uses getter functions to retrieve the states. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/8f805bd9-5bd2-42bd-983f-e123ec07ef6f/MainMenu_FriendsList.png Work I had to build the entire friends list from scratch in a short amount of time. I was able to create and iterate quickly by creating a base “player card” class that could be used as a parent for each type of friends list entry. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/7e2ab0c2-d168-4a49-a7b8-598358ba4072/WCCFredfall1.jpg Work - REDFALL The town of Redfall is under siege by a legion of vampires who have cut the island off from the outside world. Trapped with a handful of survivors, slay alone or squad up in open-world FPS action. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/e93bf8e2-748c-4d71-8e01-00dae687febf/wayfinder.png Work - Wayfinder Become a Wayfinder, and unlock their powers as you choose your path and playstyle while pushing back a hostile force that has overtaken your world. A Co-Op ARPG where you directly shape and customize the endless adventures you go on with friends, because Wayfinders are stronger together. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/779f1615-0d32-49b8-9685-84ac86317b87/Untitled+Project.gif Work - Notched Frame Material Almost every button in Wayfinder has a notched frame, previously achieved with different textures for different sizes, widths, and angles. To cut down on texture bloat, I created a flexible material with the potential to replace most of these textures. This also allowed the frames to have more interesting animation, like increasing the stroke size on hover. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1621542913499-NGTWCM1ES7MTUMYWJZNH/dreadnoughttile.png Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1621993171411-L67AUI4G3VO2ZVAPD7IM/en-16br-impossibleescape-social-social-1920x1080-93b676681c5a.jpg Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1621993433453-L02ER0UQFWB77KS00YP7/nguthan.com-aEpCh9IlMyoxuOT6-the-mandalorian-is-coming-to-kill-you-in-fortnites-latest-ltm-image1.jpg Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1621994989163-868VNGETI0W44ATK5M9U/Bodyguard.jpg Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1621996488796-Z4O3FF9YTKELRMV1CVO0/maxresdefault%2B%25281%2529.jpg Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622042464284-U8GZU43JPB69LA2PTWGJ/MIDUS.jpg Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622046264267-UEQEKLD425EPZYO9RGPK/tiltedtaxi.jpg Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622048306616-O6DWIIZZK5HVLJ823GUJ/fortnite-operation-knockout-spy-games-intel.jpg Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1622067036848-YRQKBNO55AFYCVXDBA6C/Joyride.jpg Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1697058102336-IB3SYLKVC1RBXZUZXGK3/RedfallShowcase_HERO-82ce1f68710039d1c4d2.jpg Work https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1727219491674-ND4WDTOVUF7DK6GA0FHC/a3579080051_65.jpg Work https://www.matt-mcauliffe.com/portfolio daily 0.75 2021-05-18 https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1621296048041-0I19NBPP17XCE2MMDSO5/fortnite---button-1520296499714.jpg Portfolio - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1621296067618-26KR9EPCP8LEDX7WP6IY/Dreadnought+banner.jpg Portfolio - Make it stand out Whatever it is, the way you tell your story online can make all the difference. https://www.matt-mcauliffe.com/new-page daily 0.75 2021-05-19 https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1621296338310-M763W2KSWAPLSQXSRDIW/Destiny+2_20210511215302.jpg Fortnite https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1621296329794-19LA1L5BFHCAR3GR9EFW/Destiny+2_20210512001121.jpg Fortnite https://images.squarespace-cdn.com/content/v1/5c9a8a279b7d150ebcf0ffec/1621296343186-1R2FI066279MX2858EOH/Destiny+2_20210511171201.jpg Fortnite https://www.matt-mcauliffe.com/resume daily 0.75 2024-10-06