Stacie Arellano

Artist, Author, Web Maven

Page 5 of 8

iOS Project Log 5

Lots of things happened this week.

Design

The artists are buzzing about with some on the general look and feel and our heroine design is also in the works.

We’re trying to use inVision for collaboration, but it’s new to all of us, so we’re learning all together. I copied lots of my mood board images over to an Invision Mood Board… it doesn’t work like Pinterest, but does some things that pinterest does not. My favorite invision feature for mood boards?  It grabs a color palette from each image!

Here is a character sketch of our Hero by E.M. Isn’t she cute!

herogirl

and some colors from N.P.

TTcolors

 

I made a couple sketches to explain the concept, ie that the hero is basically rock climbing up a tower.

TTsketch1-sla

Crossing a bridge over flames.

 

 

 

 

 

TTsketch2-sla

More tower wall, with a dragon in a cavern underneath

 

 

 

 

 

 

 

 

 

 

I dashed off a brief wireframe for a common starting point. wireframe1.png

Research – Banduras, Kobzari

Since a lot of our inspiration is coming from traditional Ukrainian costumes, I searched for traditional Ukrainian instruments and came across a beautiful stringed instrument called the Bandura.

<a data-pin-do=”embedPin” data-pin-terse=”true” href=”https://www.pinterest.com/pin/407786941234575814/”></a>

<a data-pin-do=”embedPin” href=”https://www.pinterest.com/pin/214132157252118086/”></a>

This of course led me to wikipedia

Wikipedia: Bandura

Which led me to an amazing new fact:

Musicians who play the bandura are referred to as bandurists. Some traditional bandura players, often blind, were referred to as kobzars.

What?! This meant I hopped straight to the entry on the Kobzars

Wikipedia: Kobzars

In Ukraine, kobzars organized themselves into regional guilds or brotherhoods, known as tsekhs. They developed a system of rigorous apprenticeships (usually three years in length) before undergoing the first set of open examinations in order to become a kobzar.

Wikipedia: Preservation of Kobzar music

and this interesting list of recordings off off wax cylinders of actual Kobzar music! The recordings are rough, and the most popular ones are the roughest. Wax cylinder recordings degrade with each listen.

Tutorial

I’m 3/4 of the way through the maze games tutorial from CartoonSmart. I can load the maze and enemies from a json file, created by using Tiled. It’s a bit of a slog here in the middle, but I’ll push forward.

iOS Project Log 4

Sound Maze Game Progress

Climb the tower, pass the tollways using your ears and your wits, but don’t believe your eyes!

Design

My project now has TWO artists! /kermitarms.  That means our project is fully staffed and we can forge on!

The theme and design of the game is taking shape, at least in my mind. 😉 I’ve shifted from thinking this will be a top down game, it will be a face on perspective.  Our protagonist will traverse a tower that looks safe, but is only an illusion, needing to use the audio clues to know which ways are safe/possible to climb.

To help inspire and communicate my vision I’ve created a mood board with visual themes/ideas.

Follow Stacie’s board Tollways Tower on Pinterest.

 

Research – Accessibility

Bought a book on accessible games, published in multiple formats by National Braille Press.  It lists many accessible games that I’ve run across in my research, as well as a few I have not.

I was a bit disappointed the content focused more on quick suggestions of which games to play than what makes each one ideal. There is still plenty of hints and tips to glean regarding control schemas. Most of the games are also listed on http://www.applevis.com with reviews, but it’s nice to have an organized selection in one place.

I will need to explore the VoiceOver options as I stitch things together. Is it as easy as adding alt text for web? or does it require a few more settings. There’s a standard, I just need to follow it.

Tutorial

Am halfway through the mazes tutorial on CartoonSmart. Spent some time learning how to make nodes and add attributes that allow them affect other nodes or physics.

Learned how to create a maze using the SKS builder and how to parse JSON levels created with a cool new(to me) tool Tiled.

I had to do some debugging before jumping into the 3rd section, somehow I’d lost my hero ship, and while the map was displaying fine, and all the gestures were working as desired, I could no longer see the ship itself moving around the map!

That took some slow review of the code to fix, but I’m happy it’s working again!  It’s the foundation of my sound maze, the basics I’ll start from before adding the pieces and graphics, and other variations.

More to come, I imagine I’ll be setting up some wireframes with my team in Invision over the next few days, and they are working on some character designs for our heroine, and some general look and feel for our app.

 

The Grid – Beta

Have you heard of The Grid, an AI that builds your website?

They have an impressive demo video, and a strong marketing strategy.

I made it into the beta early, and have been able to start poking around with both the documentation and the site builder apps.

I’m intrigued…

There are a lot of things going on under the hood.  The system is analyzing my photos, adding color filters to match my branding (which was in turn created from the system analyzing a picture I chose, in the first place).  Then it attempts to place title text in places that don’t overlap important parts of the images.  You make a few other choices, layout, type formality and then the AI builds you a site.

It’s a bit of trial and error now, and the tech bits seem more mature than the user interface. That jives, the system does work, but it’s a bit difficult to figure out how to ‘make it go.’

It’s beta, things like the on-boarding of new users, tutorials and walk-throughs are pretty light on info.

but that’s part of the adventure, right?

There have provided a lot of API documentation, sites live on thegrid.ai and the files live github folders.

It’s not a magic bullet, someone will still need to make some choices about the direction of things, even when the AI has a better idea about what successful sites look like and operate.

But, I think it’s a step in the right direction, and every time the AI learns a new trick it goes through all sites and republishes them, making better choices.

That kind of thing will keep things fresh, evolving, and hopefully – eventually engaging.

It’s going to be a little while before truly professional/beautiful sites just ‘happen’ through the grid. I’m more than willing to wait to see where this takes web design and development.

Questions:

How do I sync my website/twitter feed/other RSS feeds to my grid site?

I see something in the documentation, for the API, about how to write ruby/python/ect to link feeds in, but this seems like a standard base requirement that many grid sites will be looking for.

Why doesn’t theGrid chrome extension or the IOS app use the application token authorization for apps I’ve already logged in to/authorized.

Good that it uses the twitter account from IOS, bad that all other accounts (g+. Facebook, ect) it sends me to a login screen even if I have an app open and logged in already.

Why does my grid extension have two share options when I right-click on something to share to the grid?

They both seem to work.

Oversharing.png

ok, a day after grabbing that, it’s working properly, glitch or fix, it’s better:

Screen Shot 2016-02-18 at 4.00.46 PM

It seems like the company, like their AI, is iterating features/improvements daily.

Why is the ‘Review Design Changes’ page bright yellow?

blindedbytheyellow

New Crayola color:  ‘Augh My Eyes! Yellow’

Every other page of the grid on the app or in the chrome extension is dark gray, soothing to the eyes and not a bright hazardous  yellow background?

I shared a post that seems to mysteriously be shrinking with each iteration.

The fonts for those 2 posts are pretty much unreadable unless I look at the responsive phone sized version. This may be an @media size issue. If I make the browser window larger or smaller, the font sizes become readable again.

What does the AI see as a ‘Successful’ design/iteration?

I’d love to see 6 possible designs that the AI discarded in favor of the one I get.

I’d love a mode where I can thumbs up or rate the results when I get them. I want to help train the system!

A feature I’m looking forward to is focused ‘purpose‘ options. The company has spoken about how choosing purpose categories like ‘sales‘, ‘newsletter sign ups‘, or ‘increase social exposure‘ will help influence how the system makes some design choices.

Could the Grid AI start to learn my personal preferences as well as successful designs over all?

We’ll find out as the year progresses. I’ll post a link to the sites I’m experimenting on when I have more time to play.

Stay tuned

iOS Project Log 3

Last week the local superhero and I met with some of the designers to pitch our personal projects and explain the group project some more. The placid dinosaur was on a business trip, as dinos do, but checked in via our team Slack.

Notes from that meeting:

  • The personal projects put the devs in the unique position of being both client and collaborator. I think this is a new concept for some of our group.
  • Communicating visually, with links to apps or screenshots or in person demonstrations will help the process.
  • Not everyone is comfortable with Slack as a communication tool, not everyone is familiar with InVision as a prototyping tool. We are all learning.
  • Clear requests/requirements and examples will be the best bet.
  • No designers are currently assigned, waiting on them to talk amongst themselves, then we will divide and conquer!

 

Sound Maze Progress

I am about a 25% of the way through the Cartoon Smart Maze Games tutorial. I can place SKNodes on the canvas, recognize gestures and have created a player/hero class. I have a working hero atlas which is animating through several frames.

I like the teaching audio and progression quite a bit, but all videos of programming/typing need closer focus on the active pane. Please don’t waste my smaller screen with sidebars and whitespace from a larger screen.

Additionally, if you are recording a presentation of ‘live’ coding, please increase the font size. I’ve been zooming in on the hd video to see what’s going on, but that makes it more difficult to pause and rewind.

Some takeaways:

  • CGPointZero is a shortcut for (0.0,0.0)
  • Every SKSpriteNode can have a parent. you can move/animate everything on the screen at once by moving/animating just that parent node.  (this reminds me of my ancient Flash developing days)
  • I keep getting this error, but it doesn’t seem to stop me from successfully building/running my code. It may be a remnant of an earlier version of Xcode. I’m ignoring it for now.

CUICatalog: Invalid Request: requesting subtype without specifying idiom

  • Spent some time discussing the error and some other ideas about the game with the local superhero (who is also planning a game for a personal project). He had this suggestion regarding animation atlases: 

You should consider using reverseAction() for the last part of the array.  This will help with longer animations.  Animate 1-3 then reverse it.

Other game thoughts:

  • Use a Triad for sound feedback – Three note chords consisting of a root, third, and fifth. Perhaps each sound detail be a valid direction choice?
  • Use Tollways… gates between areas that require a Bell sound mini-game or have some other puzzle element.
  • I poked around some assets I bought over the holidays looking for some basic graphics/sounds to prototype with.
  • Things I learn for this game keep inspiring me for another one I started last semester. I keep tucking away those ideas for later pondering.

Sublime Packages

Hey, Sublime Text 3 has a new build version out! #3103 /kermit arms.

That makes this the perfect time to talk about my favorite customizations for it – Packages!

Sublime packages are a little like after market mods for your car. Or plugins. Either way they improve the usability and can do things like change the color of the interface or check your code for you.

First: Start off with the package installer, called Package Control.  https://packagecontrol.io/installation

Here are a few useful packages I have installed:

Themes

Do you have any packages that you’d recommend?

« Older posts Newer posts »

© 2018 Stacie Arellano

Theme by Anders NorenUp ↑