The words written in the front
Although MY team is closely related to business development, I have rarely written business code in the past year. What I do is more basic technology construction, and the technology stack has shifted from Objective-C to JavaScript world.
However, I still want to write something about Swift, something about iOS, and maybe I really love it.
So at the end of the year, I picked up Swift again and continued to post articles about the technology on guagua [1], mostly with tips and grammatical details. I switch between Objective-C, JavaScript, TypeScript, Ruby, and Python for my job, and I have to say that Swift’s overall experience is ok, except for Xcode.
That’s right! It is the Swift Tips series, if you are interested, be sure to follow our official account – Let technology eat together
However, the study of language itself is boring and not three-dimensional. I still want to use Swift in some specific scenes. After all, it is interesting to play!
Then I remembered one of my early flags: try game development for once.
So I quickly bought Ray Wenderlich’s 2D Apple Games by Tutorials [2]. Although its Swift 4 and iOS 11 versions, the Swift 4 to 5 changes were, to be honest, relatively modest, In addition, the iOS in the textbook is only two versions behind the real world, and SpriteKit as a whole has not changed dramatically. It’s only two quarters of WWDC for the content behind, so it’s done!
After reading this book, I have to say that the foreign teaching materials are really good, but unfortunately this book will not be updated.
Tutorials on 2D Apple Games by Tutorials took about a month to type through the code and homework on and off. I felt pretty good, so how would I use what I had learned?
At first I wanted to make a strategy turn-based game, similar to Valkyrie and Knights of the Royal Order. To be honest, BEFORE I started, I was quite confident in myself, because I had the idea of doing game development, so I developed some skills related to games early on, such as original art drawing, music production, etc. Here are some of my own small works.
Demo
00:00
01:00
But after really entering the development state, I found that things are not as simple as I thought……
I don’t want to go into the details here, but to get to the core point, I understand that the essence of a game is still telling a story, and music, art, motion, and programming all serve the purpose of this story. Without a good story, a game has no soul.
The origin of the IDEA
Realizing that I didn’t have a great story to tell, I decided to put my newfound development skills to work, but the question was how to combine a lightweight game with an everyday App.
The little dinosaur in Chrome popped into my head!
To be honest, I’m not sure why I made this Feature in the first place, but as a user, playing a game like this for a while when I’m off the Internet can both distract me and relieve my anxiety about not being able to access the Internet.
So from the perspective of user experience, this is a very good IDEA! And it really inspired me!
With the idea of improving user experience, I repeatedly observed the App usage habits of myself and my close friends. Several actions THAT I’ve seen increase user anxiety revolve around page refreshes, for example:
- An indicator that rotates when the refresh is pulled down
- The loading bar of a Web page
- Progress bar for downloading resources
- Refresh a blank page that fails or is off the network
However, based on the frequency of the above operations, the drop-down refresh should be the most frequent and the most common.
So that’s it! It’s you! Let’s make a more fun drop-down refresh control!
- From an experience point of view
In terms of drop-down operation, domestic applications mainly have two interactive forms, one is the “second floor form” represented by Taobao and JINGdong, and the other is the “classic form” represented by Meituan and Pinduoduo.
“Classic” needless to say, the essence of “form” on the second floor is through the drop-down to jump to another page, of course, in the process of the drop-down can trigger refresh, but I think this is not a necessary process, in my understanding, WeChat drop-down operation is actually a “form” on the second floor, but it didn’t refresh, Just jump to the applet selection screen by dropdown.
So, if you just start from these two traditional ideas to improve the user experience, the room for improvement is very limited.
At this point I found the mobile version of Chrome to be a bit different in the drop-down interaction!
I find it important that the dropdown allows for a more granular interaction with the user! It made me realize how many new possibilities it would give the pull-down refresh!
Imagine if we could play Road Fighter on our childhood FC, or Temple Run on mobile at —-, while scrolling down.
Play, of course, in the drop-down operation zelda, unique series is not impossible, but the experience is not necessarily good, because that kind of interaction is far too complicated, not a finger left slip right row could do, but like road warriors and temple flee this kind of interaction is very simple game, logic is lightweight enough to put the drop-down to refresh the interaction would be more appropriate.
From an experience perspective, as a user, once you trigger the pull-down refresh, you can play a relaxing and fun little game, relieving yourself from the anxiety of waiting for the network data. Doesn’t that sound good?
- From a technical standpoint
As programmers, we always need to consider what good and bad changes will result from changes to our code.
If you make a small game in a drop-down refresh, it will add complexity to the project to some extent, perhaps affecting the package size of the project, the loading time of the home page, performance metrics such as FPS, or business metrics.
So what good changes can it bring?
Before answering this question, let’s take a look at the general trend of client technology in China in recent years. In China, most e-commerce companies are doing dynamic things, from RN, Weex, Flutter, to some self-developed technologies, such as Tangram of Tmall, Dinamic of Taobao, Flexbox of Meituan, etc.
To put it simply, they may all want their App to be able to achieve content or logical updates without relying on client release. But in principle, the idea is to deliver a layout description file, bind the actual business data, and eventually turn the rendering engine into the interface we see.
However, this also brings some changes. The original background only needs to deliver the data displayed by the view, such as the content in the UILabel, while the dynamic solution needs to deliver not only the content displayed by the UILabel, but also the description of the UILable itself. This change will lead to a rapid increase in the total amount of data transferred, and even more network requests (one for business data, one for layout files).
Page loading time is a common indicator in performance monitoring or service monitoring. But the dynamic scenario, because of the additional transition process, in a way, it will worsen this indicator.
Although we will do a lot of things to optimize the loading time, and improve the indicators, but all at the end of the optimization are, and according to this principle, this optimization in the input-output ratio is limited, in the late developer racking their brains to do a lot of optimization, but the user may not perceive this 1-2 ms optimization, Instead, the maintenance cost of the code has increased considerably.
What if we could take a different approach, for example, by diverting the user’s attention and making them ignore these load times?
As it happens, the aforementioned interactive, game-like pull-down refresh satisfies the need to distract the user. If we need some indicator to measure it, we can observe and derive it in the following way:
Establish two time indicators, one is the time required to refresh the page, from the initiation of network request to the total time of page refresh, T-net, the other is the user’s play time after the pull-down refresh, from the start of triggering the Game to the user’s total time to end the Game, T-game.
For users with T-game-T-Net > 0, we can assume that they are insensitive to load times. In this case, we can increase retention and improve the user experience by adding red envelopes or other means to the Game.
For users with T-game-T-Net < 0, we can assume that they are sensitive to load times, so we can optimize them accordingly. For example, start with intelligent preloading or recommendation strategies.
So from this point of view, interactive game-like pull-downs have practical value and meaning at the technical level as well!
- From a product point of view
As you spend a lot of time in a big company, the question is, what is the point of this need? What tangible benefits does it bring? Does it make money for our department?
This feature will also face such problems, so I carefully thought about the business line and business form I was in. (PS: The following thoughts are my personal understanding, so there is no need to over-interpret them)
My department is responsible for the home page of a domestic e-commerce platform, which is very similar to the home page business of Jd.com and Taobao. It does not contain a complete transaction chain, and its primary task is traffic distribution to bring users and the possibility of continuous increase to other business lines within the company.
To put it bluntly, in my understanding, the home page is like an exhibition hall. In order to make the goods in the exhibition hall sell better, we usually have two ideas:
The first is to present the most suitable product to the customer in the most suitable location. Second: increase the booth as much as possible to display more goods
If put the idea on the home page of electric business platform module, we can also see them, such as hand tao technology often mentioned in the article one thousand thousand, it is essentially an optimization recommended strategy plan, it can be seen as the first way of variant, and in recent years, many apps from the original single card flow into a double column card flow, It is a variation of the second strategy, increasing the display location in the same space and increasing the display density.
We have also talked about the two modes of pull-down refresh before. The “second-floor mode” uses pull-down refresh as an entrance to guide other content in the App, which essentially belongs to the second strategy.
In the “classic form”, the drop-down refresh cannot be used as an entrance, while the emergence of the “second floor form” enables the operation of the drop-down refresh to enter other pages, which increases more booths in the limited space.
Under this premise, we look at the interactive game type drop-down refresh, it has to do with the form on the second floor is very close, when the game ended, it can completely as an entry, such as over a brand red rain activities after the jump to a specified channel, in addition, in the process of game and can be combined with some page elements for brand publicity, increase the exposure, For example, the background picture inside the red envelope rain, the brand of the red envelope and so on.
Overall, this makes the pull-down refresh much more “valuable” than the traditional “second floor form”!
Cold analysis
Through the user point of view, technical point of view, product point of view after three aspects of analysis, I think, this thing is to have a head! But I’m sure I’m not the first person to come up with this idea, so I did a quick Google search, and sure enough, Github already has similar demos, so here they are, with some introductions and my own opinion.
- BreakOutToRefresh
The game implementation in this Demo uses the SpriteKit framework to support Swift and Objective-C. It is making links https://github.com/dasdom/BreakOutToRefresh [3]. It basically meets my two core features, one interactive and one gamified.
However, the actual game experience did not live up to my expectations, mainly due to the following problems:
- The game’s interaction is up and down, which is similar to the pull-down action that triggers a refresh, which increases the chance of misoperation.
- The interaction elements in the game are small in size, and the collision and maneuverability of objects are poor, which makes the experience of the game not ideal.
- Even in this game of squares, the logic is a little more complicated in the dropdown refresh, especially when the ball bounces to the boundary, and some strange illogical phenomena occur, such as the ball bounces to the right boundary and returns instead of ending the game.
Of course dasdom, the author of BreakOutToRefresh, mentioned that the Demo was again derived from BOZPongRefreshControl of Boztalay [4], Unfortunately, the BOZPongRefreshControl is not interactive, and the effect we see can simply be interpreted as a preset animation, so we won’t expand it here.
As for the other implementations, I really haven’t found any in the market, so if you find anything, please leave me a comment!
Think, think, think
With that in mind, I set out to design what I understood to be an interactive, gamified drop-down refresh component.
- About interaction Mode
In iOS, there are several common gestures:
Swipe, Pinch, Rotation, Screen Edge Pan, etc. are not appropriate when combined with the pull-down refresh scenario. Only Tap, Pan and Long Press are suitable. In order not to be anti-human, we should avoid conflicts between in-game interactions and refresh pull-downs.
After combining the above points, we found that the only way to operate sprites in the game was to swipe left and click.
Sure, you can invent new gestures, but I won’t discuss them here!
- About the Game
Once we have identified the interactive ways, we need to further discuss the presentation of the game, the content of the game. In previous research, we concluded that the interactive logic of the game should not be too complex, and the Sprite size should not be too small. I wonder what games you have in mind?
In my mind, I immediately remembered the red and White games I played when I was a child, such as Requiem, Super Mario, Hot Blood, etc. But to be honest, these 8-bit games are still too complex and too heavy to be put into the drop-down refresh. Not only the game logic, but also the interaction is very different. After all, we should all remember the “up, down, left, left, right, AB, AB” secret!
So we should go back a little further, to the Atari era!
What do you say? It looks old enough!
Atari itself had a very simple way of operation, with one d-pad and one button, similar to the left and right swipes and taps we have today. Another point was that the game logic of that era was lightweight and simple. Here are a few examples: Ping Pong, Space Invaders, Pac-Man, etc., so we can all borrow from the classic atari games to achieve our own appeal.
Of course, in order to make the game more down-to-earth, that is, to better serve their own business, I put together a few actual game scenarios!
For example, approaching double 11, Taobao will distribute red envelopes!
For example, when using Didi taxi, you can let the waiting user simulate a driver on the way!
Or when ordering takeout, we can have a space war!
Show Me The Code
With that in mind, I developed a real Demo using the red envelope idea as an example. Instead of abstracting the code into an SDK like BreakOutToRefresh, I wanted people to apply this idea to their apps, not the code.
I won’t go into too much detail here, but rather a general introduction and analysis. For example code, please go to my Repo. If you think this project is interesting, remember to give me a Star!
Making address: https://github.com/SketchK/a-playable-refresh-demo [5]
- SpriteKit
As I have taught myself 2D game development before, I have no hesitation in choosing SpriteKit, Apple’s own development framework, and Swift as the language is my personal preference.
The core file in the sample code contains the following sections:
These files are the core logic of the game, and the two most important files are GameScene and GameView, but GameScene is the first.
Under this scenario, there are two main types of elves is a red envelope, it at the beginning of the game, will appear continuously from the interface above, and gradually falling down to the bottom of the interface, it USES SKAction to complete the corresponding work, and the other is a hero, it only one in the game and when the interface is initialized is created, The movement is based on the left and right offsets of the gesture, and HERE I used the more traditional manual calculation.
The core point of this type of game is the collision problem. On the one hand, the collision between the hero and the game interface. Here, we should ensure that the activity scope of the hero Sprite should not exceed the game interface, and its logic is put in the life cycle method of update. We need this to detect collisions between them to continue and end the game, and this part of the logic is placed in didEvaluateActions.
- The refresh mechanism
As for GameView, it took two important work, one is to refresh the control logic, a switching logic is the game interface, the two work has certain inner link, you can split into two templates, can also be integrated into one module, as the code of practice, my plan is not a best solution.
In addition to the refresh mechanism, this Demo is not perfect, if you want to know more, I recommend you to look at some of the community’s excellent drop-down refresh component library, here you just need to understand that the game interface switch logic is associated with the refresh control.
The end of the
Now, this is the end of the article, probably not so much, but basically talking about what I was thinking about, what I was doing, what I was doing when I wrote this Demo.
Unfortunately, I can’t use this idea in my own App, but I’d love to see it work and see how it actually works. If anyone does, please contact me to discuss!
Project code address is: https://github.com/SketchK/a-playable-refresh-demo [5], if you think it is good, please remember to give me a Star!
Happy New Year to you all!
The resources
Bo: https://github.com/Desgard
The 2 d Apple Games by Tutorials “: https://store.raywenderlich.com/products/2d-apple-games-by-tutorials
https://github.com/dasdom/BreakOutToRefresh: https://github.com/dasdom/BreakOutToRefresh
BOZPongRefreshControl: https://github.com/boztalay/BOZPongRefreshControl
https://github.com/SketchK/a-playable-refresh-demo: https://github.com/SketchK/a-playable-refresh-demo